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

【问题标题】：How to simulate HTML5 Drag and Drop events in javascript?如何在 javascript 中模拟 HTML5 拖放事件？
【发布时间】：2013-03-27 06:27:00
【问题描述】：

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

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

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

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

我已尝试修改 simulation function found on SO 以添加 HTML5 dragstart 事件，以便我可以在演示页面上尝试以下操作

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

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

基本上，我会接受任何可以让我使用 jquery.ui.simluate（或其他库）或使用修改版我在 SO 上找到的simulate function。

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：