如何在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（或其他库）或使用我发现的demo drag and drop page的修改版本将元素'three'拖动到simulate function中的'bin'元素所以。

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

Answer 2

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