HTML5 Drag and Drop in deeetail

Ajaxian » Front Page by Dion Almaer

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;
  2. dt.setDragImage( $(‘#feedback_image h2’)[0], 0, 0);
  3. dt.setDragImage( $(‘#logo’)[0], 32, 32);
  4. var canvas = document.createElement(« canvas »);
  5. canvas.width = canvas.height = 50;
  6. var ctx = canvas.getContext(« 2d »);
  7. ctx.lineWidth = 8;
  8. ctx.moveTo(25,0);
  9. ctx.lineTo(50, 50);
  10. ctx.lineTo(0, 50);
  11. ctx.lineTo(25, 0);
  12. ctx.stroke();
  13. 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?

Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s