如何在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（或其他库）或使用修改版本的方法将元素'three' 拖动到演示拖放页面中的'bin'元素模拟我在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: [] }}));

Answer 2

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

https://github.com/Photonios/JS-DragAndDrop-Simulator