HTML5 Training (Drag and Drop)

Drag and drop support in browsers, initially conceived by Microsoft's Internet Explorer team in 1999, is slated to become an official part of the HTML5 spec, as outlined by the W3C. Drag and drop enables users to utilize interfaces in a more human way, by allowing items to be both dragged and dropped, as one would do in real life to sort items or data.

drag and drop

Drag and drop is, according to Peter-Paul Koch, one of the most widely respected voices on HTML and related technologies, broken, stating that:

You MUST NOT use HTML5 drag and drop. Rely on old-school scripts instead.

User Feedback

User feedback from drag and drop implementations varies heavily, with Firefox taking the most logical approach and providing the user with clear feedback:

Chrome on the other hand, provides the user with no information at all about the item that is being dragged:

Internet Explorer versions 6 and 7 are unable to render HTML5 drag and drop controls at all:

Internet Explorer 8 is giving the user conflicting feedback, in essence telling him / her that dragging is not supported by means of a forbidden cursor, while at the same time, still allowing an item to be dragged and dropped.

Support

Support for drag and drop is only spottily available in recent versions of Firefox, Safari and Chrome, with old versions of Internet Explorer not being able to support drag and drop at all. More recent versions of Internet Explorer, while technically being capable of supporting drag and drop, have a problematic user interaction design, which could result in an extremely confusing user experience.

Showcases

Following are a number of screecasts that display different features of drag and drop implementations.

The video below demonstrates how drag and drop can be used to test fonts, by dragging them into the document:

The video below demonstrates how Firefox is unable to cope with bad fonts and instead of displaying an error message, crashes.