Scott's Workblog

This blog has moved! Go to my new blog!

June 23, 2009

Drag and drop with HTML 5 and Wookie

There are a lot of cool things about HTML 5, the standard for the next generation of the web, but drag and drop is one of those obvious ideas that makes you wonder why we've never had it before. So I've put together a quick demo to show how HTML 5 drag and drop works.

To see this demo you must be using Firefox 3.5, which is currently the only browser which has support for it - but expect others to follow suit over the next year or two. This demo also uses widgets served on a wookie server, but its not dependent on widgets at all - its just a handy thing to demonstrate drag and drop with.

Below is a Google Maps widget, and this is the drag source. The marker in the map widget has its draggable attribute set to "true", which switches on dragging. I've also attached a function to it that adds an image of the marker to the drag, and specifies the information the drag event should contain (in this case, the name of the city you searched for).

Next is a Weather widget, and this is the drop target. I've added an ondrop attribute to its main <div> element, with a function that changes the current location of the widget using a text value dropped on it.

To try this out now, search for one of the cities the weather widget supports (Manchester, London, Glasgow, Aberdeen, Leeds...). Then drag the map marker onto the weather widget to see it update.

Now, this isn't amazingly clever, as there are some tricks with JavaScript than can do something similar. So, right-click each Widget and choose This Frame -> Open Frame in New Window, and then try it again. Now, try to think of a way to do that without HTML 5!

Even better, this works across domains, so if you have your own site or widget with a drop target defined on it, you can drag a marker from the map widget onto it. This means there is now a way to enable cross-site communication within the browser - opening up all kinds of new possibilities.

For more information on the HTML 5 specification, the Wikipedia entry is a good starting point. There is also an overview at W3C.

main archive