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