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.
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.