Native drag and drop with the HTML5 drag & drop api
Drag and drop used to be a lot of custom Javascript, relying on mousedown, mouseup, mousemove events to work. These drag and drop Javascript libraries do a decent job within their own environment, but they can't really interact with system drag and drop. With the HTML5 drag and drop API we can handle dragging stuff into the browser, dragging within the browser and dragging out of the browser.
Go have a look at the examples over at the HTML & CSS Advent 2012
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 draggable="true" attribute. After this the Javascript fun starts!
We can attach the dragstart and 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 object with 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 dragoverevent 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 special dataTransfer.files property that contains a FileList with the dropped files.
In short: that's it. There are some quirks that take some time to figure out, but in general it works pretty well.
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.
Written by Flurin Egger
Related protips
3 Responses
thanks. nice to know how to use it :)
One of the important quirks is that you would have to call event.preventDefault() on most events in order to get it to work on most browsers. Some insane logic there, but the preventDefault is there to tell the browser that we don't want the default implementation. (Read PPK's rant on this if you feel like: http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html) Though I think his take is a bit extreme, drag drop can be made to work well if you try. Could be better, but works.
Yes, that's one of the quirks indeed. Another is that it's dragenter/dragleave get's called when you enter child elements too (but with the event.target being the parent).
Have a fresh tip? Share with Coderwall community!
