javascript - 如何在 javascript 中模拟 HTML5 拖放事件？

Question

作为标题，我正在尝试在 javascript 中模拟 HTML5 拖放事件。

我查看了 jquery.ui.simulate 以及这里的模拟功能。两者似乎都可以通过模拟与 jQuery UI 对象一起使用的 mousedown、mousemove 和 mouseup 来模拟拖放。

但是拖放演示站点等页面中的拖放事件似乎无法使用相同的方法进行模拟。触发 mousedown 似乎不会触发 dragstart HTML5 事件。

有没有办法根据模拟 mousedown/mousemove/etc 来触发 dragstart 事件，或者有没有办法直接模拟 dragstart（然后放下）事件？

我尝试修改在 SO 上找到的模拟功能以添加 HTML5 dragstart 事件，因此我可以在演示页面上尝试类似以下内容

 simulate( document.querySelector('#three'), 'dragstart')

但我收到一个错误，因为我不确定如何在模拟的 dragstart 事件上正确创建 dataTransfer 对象。

基本上，我会接受任何可以让我使用 jquery.ui.simluate （或其他库）或使用修改版本的演示拖放页面中的元素“三”到“bin”元素的答案模拟我在 SO 上找到的功能。

score 9 · Accepted Answer

最好的办法是重新创建一个虚假的事件对象。

在我对拖放文件上传库（Droplit，无耻插件）的单元测试中，我一直在使用 jQuery 的Event方法进行此操作。在我的源代码中，我设置了我的 drop 事件侦听器，element.ondrop()如下所示：

element.ondrop = function(e) {
  e.preventDefault();
  readFiles(e.dataTransfer.files);
};

然后我可以通过构建一个假事件对象并将其传递给ondrop方法来测试它。

element.ondrop($.Event('drop', {dataTransfer: { files: [] }}));

score 2 · Accepted Answer

你可以试试这个。它使用原生 HTML5 事件，没有 jQuery

2 回答 2