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

【问题标题】：HTML5 Dragging and Dropping multiple elements between multiple browser windowsHTML5 在多个浏览器窗口之间拖放多个元素
【发布时间】：2011-08-18 12:14:40
【问题描述】：

我使 HTML5 拖放对单个元素运行良好。这在多个浏览器中也很有效，例如我打开了两个相同或不同的浏览器窗口，我可以从一个浏览器拖放元素到另一个浏览器的放置区——这对于单个元素来说很好。

如果想选择多个元素并拖放，有谁知道如何完成这项工作？

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

您一次不能拖动不止一件东西，您需要做的是沿着这些路线做一些事情。在这个例子中假设我们有一个多选列表，当你拖动一个被选中的元素时，所有被选中的元素都应该被拖动。

监听其中一个可拖动对象的 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

【讨论】：

小提琴好像坏了
它不能在 IE 上运行。但是，如果您不使用 IE，请确保在开始拖动之前单击水果将其选中。
使用 Chrome。点击选择解决了它。合成 ul 时存在瞬时闪烁的问题，但我猜你可以通过在屏幕外渲染来解决这个问题。