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

Question

作为标题，我正在尝试在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（或其他库）或使用修改后的'{3}}将元素'3'拖动到'bin'元素我在SO上找到的demo drag and drop page的版本。

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: [] }}));