html - 将 HTML5 拖放与 Aurelia 结合使用

Question

我想在 Aurelia 中实现简单的拖放操作，但似乎无法触发拖放事件。

<template>
<div class="container">
    <div class="row">
        <div draggable="true" dragstart.delegate="dragStart($event)">Drag Me</div>
    </div>
    <div class="row">
        <div class="upload-drop-zone" dragenter.delegate="dragEnter($event)" drop.delegate="dragDrop($event)">Drop Area</div>
    </div>
</div>

export class DemoPage {
 dragStart(event) {
    console.log('dragstart', event);
    return true;
}

dragEnter(event) {
    console.log('dragEnter', event);
    return true;
 }

 dragDrop(event) {
    console.log('dragDrop', event);
    return true;
 }
}

感谢任何帮助 - 谢谢。马特

Answer 1

第 1 步:实现 dragover 回调

HTML 5 spec requires您在 dragover 事件上 preventDefault 以将元素标记为可放置。 dragenter 回调是不同的。当拖动的元素首次进入目标元素时触发它，最适合切换视觉问题。

app.html

<div class="upload-drop-zone" dragover.trigger="dragOver($event)" drop.trigger="dragDrop($event)">
  Drop Area
</div>

app.js

dragDrop(event) {
  event.preventDefault();
}

第 2 步:使用 trigger 而不是 delegate

delegate 是使用 event delegation pattern 的特殊工具，一个优化。它将事件处理程序附加到文档主体上，并允许事件仅在正确的元素上传播。由于拖放规范有些脆弱，我建议改用 trigger，它将事件处理程序直接附加到元素。

app.html

<div class="row">
  <div draggable="true" dragstart.trigger="dragStart($event)">
    Drag Me
  </div>
</div>
<div class="row">
  <div class="upload-drop-zone" dragover.trigger="dragOver($event)" drop.trigger="dragDrop($event)">
    Drop Area
  </div>
</div>

第 3 步(完成):从事件处理程序返回 true

返回 true 告诉 Aurelia 将事件传播到浏览器。由于我们相信浏览器会为我们完成所有拖放操作，因此我们需要从所有拖放事件中返回 true，dragover 和 放下。看这里:https://github.com/aurelia/binding/issues/336

这里的工作要点:https://gist.run/?id=375dbed8d63cff44075e5f93403dd9dc