Friday, July 17th, 2009p>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:
- Old school drag and drop
- New school drag and drop
- New school drag and drop, now with Event Delegation!
- Using drag feedback images
- Using data transfer content types
- Using drag effects
It is so cool to be able to do things like this:
- var dt = ev.originalEvent.dataTransfer;
- dt.setDragImage( $('#feedback_image h2'), 0, 0);
- dt.setDragImage( $('#logo'), 32, 32);
- var canvas = document.createElement("canvas");
- canvas.width = canvas.height = 50;
- var ctx = canvas.getContext("2d");
- ctx.lineWidth = 8;
- ctx.lineTo(50, 50);
- ctx.lineTo(0, 50);
- ctx.lineTo(25, 0);
- 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