Cross-browser support be damned, because Google recently released drag-and-drop support for file attachments in GMail last week. Currently, the only supported browsers are Chrome and Firefox 3.6. And no need to turn this on in Google Labs, this feature completely bypassed that and was switched on for all GMail users.

The beauty of this feature is that this works with files outside of the browser. Go ahead and drag files from your file browser or desktop, it will begin uploading once you drop it into the dropbox that appears in your email.

So how does it work? One of the key properties of the new drag-and-drop events is “dataTransfer”. This property is exposed by the following command:

var dt = event.originalEvent.dataTransfer;

The two main methods are “setData()” and “getData()” in the dataTransfer property. “setData()” sets the data type and data to elements. This is usually set in the “dragstart” event. For example, say you have an <li> element on the page:

<li draggable=”true” id=”draggableLI”>This is the element</li>

You then want to bind the “dragstart” event to the element and the data associated with it:

$(‘#draggableLI’).bind(‘dragstart’, function(event){

var dt = event.originalEvent.dataTransfer;
dt.setData(‘text/plain’, ‘HTML5 is groovy!’);

});

Next, we need a receiver. This is done in “getData()”, and is normally set in the “drop” event. Let’s add this to a dropbox div on the page:

$(‘#dropbox’).bind(‘drop’, function(event){

var dt = event.originalEvent.dataTransfer;
var elementText = dt.getData(‘text/plain’);
alert(elementText);

});

There are a handful of other drag-and-drop events, and a list of recommended content types. This example illustrates the basics of what HTML5 drag-and-drop is capable of, and what we can look forward to as more major websites (and smaller ones too) follow Google’s lead.

For a more in-depth article on HTML5 drag-and-drop and the full list of events associated, you can check out an article by Les Orchard from the Mozilla development team:

http://decafbad.com/blog/2009/07/15/html5-drag-and-drop

Jeff Chew
Director of UI Design and Development