I made the HTML5 drag and drop working fine for single element. This is working good across the multiple browsers too e.g. i have two same or different browser windows open and i can drag from one browser and drop the element into the dropzone of another browser - this works fine for single element.

Has anyone idea how to make this work if want to select multiple elements and drag drop ?

I made the HTML5 drag and drop working fine for single element. This is working good across the multiple browsers too e.g. i have two same or different browser windows open and i can drag from one browser and drop the element into the dropzone of another browser - this works fine for single element.

Has anyone idea how to make this work if want to select multiple elements and drag drop ?

• javascript
• html
• drag-and-drop

Share Improve this question Follow asked Aug 18, 2011 at 12:14 DipakRiswadkarDipakRiswadkar 30222 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You cannot drag more than one thing at a time, what you would need to do is something along these lines. In this example suppose we have a multi select list, when you drag one selected element, all selected elements should be dragged.

1. Listen for a dragstart event on one of the draggables
2. When setting the dataTransfer - you need to encode data in there that will represent all the stuff you want dragged.
3. Customise the drag image to show the user more than one thing is being dragged.

See example here 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));
});

Also see here for more discussion of drag image support :drag image support