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));
});

另請參閱此處以獲取有關拖動圖像支持的更多討論： 拖動圖像支持