javascript-HTML5在多个浏览器窗口之间拖放多个元素

我使HTML5拖放对于单个元素可以正常工作.这在多个浏览器上也很好用,例如我打开了两个相同或不同的浏览器窗口,我可以从一个浏览器中拖动并将该元素拖放到另一个浏览器的放置区中-这对于单个元素来说效果很好.

如果要选择多个元素并拖放,有谁知道如何使它起作用？

解决方法:

您一次最多只能拖动一件事,而您要做的就是遵循这些思路.在此示例中,假设我们有一个多重选择列表,当您拖动一个选定的元素时,所有选定的元素都应被拖动.

>在其中一个可拖动对象上监听dragstart事件
>设置dataTransfer时-您需要在其中编码表示要拖动的所有内容的数据.
>自定义拖动图像,以向用户显示不止一件事情被拖动.

在这里查看示例jsfiddle

$(".draggableThingsSelector").on("dragstart", function(e) {
   e = e.originalEvent;

   var fruitList = [],
       dragImage = document.createElement("ul");

   $("li.selected").each(function() {
       fruitList.push(this.innerHTML);
       dragImage.appendChild(this.cloneNode(true));
   });

   e.dataTransfer.setData("fruits", JSON.stringify(fruitList));
});

另请参阅此处以获取有关拖动图像支持的更多讨论：drag image support