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

Question

如标题所示，我正在尝试在 javascript 中模拟 HTML5 拖放事件。

我研究了 jquery.ui.simulate 以及模拟函数 here .两者似乎都可以通过模拟与 jQuery UI 对象一起使用的 mousedown、mousemove 和 mouseup 来模拟拖放。

但是像drag and drop demo site 这样的页面中的拖放事件似乎无法使用相同的方法进行模拟。触发 mousedown 似乎不会触发 dragstart HTML5 事件。

有没有一种方法可以根据模拟的 mousedown/mousemove 等触发 dragstart 事件，或者有没有一种方法可以直接模拟 dragstart(然后放下)事件？

我试过修改 simulation function found on SO添加 HTML5 dragstart 事件，这样我就可以在演示页面上尝试类似以下内容

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

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

基本上，我会接受任何允许我将元素“three”拖到 demo drag and drop page 中的“bin”元素的答案。使用 jquery.ui.simluate(或其他库)或使用 simulate function 的修改版本我在 SO 上找到了。

Answer 1

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

在我对拖放文件上传库(Droplit，无耻的插件)的单元测试中，我一直在用 jQuery 的 Event 做这个。方法。在我的源代码中，我使用 element.ondrop() 设置了我的 drop 事件监听器，如下所示:

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

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

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