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

Question

我对单个元素进行了HTML5拖放操作。这在多个浏览器中也可以工作，例如我有两个相同或不同的浏览器窗口打开，我可以从一个浏览器拖放到另一个浏览器的dropzone - 这适用于单个元素。

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

Answer 1

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

1. 侦听dragstart事件上
2. 当设置数据传递的拖拽元素之一 - 你需要编码在那里的数据将代表所有你想要拖动的东西。
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