使用HTML5拖放Aurelia

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

在HTML 5规范要求,你preventDefault的dragover事件,以标志元素为可投放.该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是一种使用事件委托模式的特殊工具,一种优化.它将事件处理程序附加到文档正文上,并允许事件仅在正确的元素上传播.由于拖放规范有点脆弱,我建议使用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和之外的所有拖放事件返回drop.见这里:https://github.com/aurelia/binding/issues/336

工作要点:https://gist.run/ ？ id = 375dbed8d63cff44075e5f93403dd9dc