Friday, July 17th, 2009

HTML5 Drag and Drop in deeetail

Category: Browsers, HTML

Les Orchard isn’t just a cool domain name. He is a person. A person who has done a great job detailing HTML 5 drag and drop that you can use today in Firefox 3.5.

Les takes us down the path from simple drag and drop, to event propagation, to feedback images, to rich data transfer information all with great demos:

It is so cool to be able to do things like this:


  1. var dt = ev.originalEvent.dataTransfer;    
  3. dt.setDragImage( $('#feedback_image h2')[0], 0, 0);
  5. dt.setDragImage( $('#logo')[0], 32, 32);
  7. var canvas = document.createElement("canvas");
  8. canvas.width = canvas.height = 50;
  10. var ctx = canvas.getContext("2d");
  11. ctx.lineWidth = 8;
  12. ctx.moveTo(25,0);
  13. ctx.lineTo(50, 50);
  14. ctx.lineTo(0, 50);
  15. ctx.lineTo(25, 0);
  16. ctx.stroke();
  18. dt.setDragImage(canvas, 25, 25);

Drag and drop on the Web has always been a strange beast, but at least now we have a rich API…. so maybe it will get a revival?

Posted by Dion Almaer at 7:26 am

4.4 rating from 36 votes


Comments feed TrackBack URI

Some of the demos also work in Webkit nightlies. Really cool.

Comment by devongovett — July 17, 2009

Finally something in HTML5 that is actually useful and has a chance of being implemented by Microsoft.

Comment by Darkimmortal — July 17, 2009

We have also implementation of this Drag&Drop API (initially created by MS, as noted by SleepyDog) with minor limitations in Ample SDK Works in all browsers.

Comment by SergeyIlinsky — July 17, 2009

This also works in Safari Webkit nightlies. Not sure if it works in straight 4.0.2.

Comment by spullara — July 17, 2009

Webkit nightlies supports the draggable attribute, but Safari 4.x doesn’t just yet. Oddly you need to kick it with CSS using -khtml-user-drag: element;

I wrote an article for last week or so ago going through DnD and cross browser issues to watch out for: native HTML 5 drag and drop.

Comment by remy — July 18, 2009

I don’t get it. Why does WHAT-WG prefer to solve problems which already have solutions?

Drag’n’drop is very easy to implement if you use Flapjax for example.

Comment by chiaroscuro — July 19, 2009

Interesting to know that CSS may be formatted in so many styles. It was interesting to me.

Comment by stoimen — July 20, 2009

Thanks for that
We are leraning

Comment by RawChocolate — July 30, 2009

This is really cool. we use drag and drop in our cms too great for user interface usability.

Comment by websitedesignkent — March 29, 2011

Nice to see such useful functionality implemented in HTML5. Hope it’s supported by Microsoft

Comment by tedathds — July 6, 2012

Leave a comment

You must be logged in to post a comment.