通过 Aurelia 使用 HTML5 拖放

Question

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

<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 回调

preventDefault 在dragover 事件中的HTML 5 spec requires 用于将元素标记为可丢弃。 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 将事件传播到浏览器。由于我们信任浏览器为我们完成所有拖放操作，因此我们需要从除dragover 和drop 之外的所有拖放事件中返回true。见这里：https://github.com/aurelia/binding/issues/336

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