What are we talking about?
How does it work?
When we're dealing with elements within the browser, we have to tell
the element that it's draggable with the
We can attach the
dragend events to the draggable
attribute to detect when the dragging starts and ends. When the
dragging starts, you can set the data that should be set with the
dragging operation. This is especially important if you want other
programs to understand the thing you're dragging. You can attach your
data in multiple formats to the event's
dataTransfer.setData(CONTENTTYPE, DATA) the draggable data must
always be a string. In the example above we did this:
event.dataTransfer.setData("text/plain", category + " : " + this.innerText); event.dataTransfer.setData("text/html", "<strong>" + category + "</strong> : " + this.innerHTML);
to set the draggable data in plain text and in html.
Drop targets receive the
dragenter event when you enter the element
while dragging something, or
dragleave when you leave the element.
When you move your draggable over the drop target, the
gets called. Finally, when you drop somthing, the
drop event gets
called. You can then read out the data with the event's
dataTransfer.getData(CONTENTTYPE) function. When you drop a file there is a
dataTransfer.files property that contains a
FileList with the
In short: that's it. There are some quirks that take some time to figure out, but in general it works pretty well.
- Uploading multiple files by drag and drop
- Dragging contactinformation directly into a webapp
- Dragging files out of your webapp (downloading them on demand) (Chrome only)
- Generally making easy drag and drop interfaces
Great, but can I use it today?
Yes sir (or madam), you can! Most of these API's have been supported in all major browsers for some time now — even though IE had only limited support until IE10.
Show me the source!
Feel free to look around the differente source files we used for this example.