HTML5 Перетаскивание нескольких элементов между несколькими окнами браузера

Question

Я сделал HTML5 перетащить и работать нормально для одного элемента.Это хорошо работает и для нескольких браузеров, например, у меня открыты два одинаковых или разных окна браузера, и я могу перетащить элемент из одного браузера и перетащить элемент в рабочую зону другого браузера.Кто-нибудь знает, как сделать это, если хотите выбрать несколько элементов и перетащить падение?

Answer 1

Вы не можете перетаскивать более одной вещи за раз, что вам нужно сделать, это что-то в этом роде.В этом примере предположим, что у нас есть список с множественным выбором, когда вы перетаскиваете один выбранный элемент, все выбранные элементы должны быть перетащены.

1. Прослушивание события перетаскивания на одном из перетаскиваемых элементов
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));
});

Также смотрите здесь для более подробного обсуждения поддержки перетаскивания изображения: Поддержка перетаскивания изображения