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

Javascript HTML5在多个浏览器窗口之间拖放多个元素,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我使HTML5拖放功能在单个元素上运行良好。这在多个浏览器中也很有效,例如,我打开了两个相同或不同的浏览器窗口,我可以从一个浏览器中拖动元素并将其放到另一个浏览器的dropzone中-这对单个元素很有效 如果要选择多个元素并进行拖放,有人知道如何进行此操作吗?如果一次不能拖动多个对象,则需要按照以下方式进行操作。在本例中,假设我们有一个多选列表,当您拖动一个选定的元素时,所有选定的元素都应该被拖动 侦听其中一个DragTables上的dragstart事件 在设置数据传输时,您需要对其中的数据进

我使HTML5拖放功能在单个元素上运行良好。这在多个浏览器中也很有效,例如,我打开了两个相同或不同的浏览器窗口,我可以从一个浏览器中拖动元素并将其放到另一个浏览器的dropzone中-这对单个元素很有效


如果要选择多个元素并进行拖放,有人知道如何进行此操作吗?

如果一次不能拖动多个对象,则需要按照以下方式进行操作。在本例中,假设我们有一个多选列表,当您拖动一个选定的元素时,所有选定的元素都应该被拖动

  • 侦听其中一个DragTables上的dragstart事件
  • 在设置数据传输时,您需要对其中的数据进行编码,以表示您想要拖动的所有内容
  • 自定义拖动图像以向用户显示正在拖动的多个对象
  • 参见这里的示例


    有关拖动图像支持的更多讨论,请参见此处:

    Fiddle似乎已损坏,无法在IE上使用。但是,如果您不使用IE,请确保在开始拖动之前单击水果以选择它。使用Chrome。单击以选择它。当ul正在创作时,有一个瞬间闪光的问题,尽管我猜你可以通过在屏幕外渲染它来解决这个问题。
    $(".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));
    });