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

Question

我让单个元素的HTML5拖放工作正常。这在多个浏览器中也很有效，例如我有两个相同或不同的浏览器窗口打开，我可以从一个浏览器拖动并将元素放入另一个浏览器的dropzone - 这适用于单个元素。

如果想要选择多个元素并拖放，有没有人知道如何使这个工作？

Answer 1

你不能一次拖动多个东西，你需要做的就是沿着这些方向。在这个例子中假设我们有一个多选列表，当你拖动一个选定的元素时，应该拖动所有选中的元素。

1. 在其中一个draggables上收听dragstart事件
2. 设置dataTransfer时 - 您需要在那里对数据进行编码，以表示您想要拖动的所有内容。
3. 自定义拖动图像以向用户显示正在拖动的多个内容。

请参阅此处示例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