22

Drag 'till you drop!

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.

What are we talking about?

Christmas

  • Eggs
  • Eggnog
  • Winter
  • Gl├╝hwein
Drag from here... (also try dragging to a mail client or texteditor)

Easter

  • Santa Claus
  • Bunnies
  • Spring
  • Presents
...to here, or vice versa. Or drag files, text or tweets in here.

Files to download

A .txt file A .html file A .pdf file
Drag out files to your desktop (Chrome only)

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.

Useful?

Doing everything with Javascript is fine as long as you don't want to interact with the user's system. This is a very useful update to that functionality. But you can use the HTML drag and drop API for all kinds of operations, like:

  • 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.

Attribution

The HTML5 Rocks article "Native HTML5 Drag and Drop" by Eric Bidelman is an excellent intro to Drag & Drop.

Remy Sharp made a nice demo for dragging anything into your browser in "Simple Drag and Drop"

We got the dragging files out of Chrome code and idea from the article "Drag out files like Gmail" by Ryan Seddon from The CSS Ninja blog.