Scott's Workblog

This blog has moved! Go to my new blog!

June 24, 2009

HTML 5 Drag and Drop + Microformats = a whole world of possibilities

In my last post I provided an example of HTML 5 drag and drop - I hope you had chance to download Firefox 3.5 to try it out. Because this time I have a much more exciting demo.

Drag and drop in HTML 5 can operate across sites in different domains; so you can drag from one site and drop onto another. Also, the data transfer object that you move in a drag and drop operation can store multiple data values.

This means as well as simple operations, we can potentially move whole blocks of structured information between websites. Lets look at an example.

First off, we have our source site, which is a fake social network. I've put it in an iFrame here:

I have another, similar site, called Right-click this link here and open it in a new window, and arrange it so you can easily see both sites on screen.

Currently the profile in "" has no friends - so why not try dragging one of the profile images from MyFaceSpace onto the "drop here" icon and see what happens? (You should see the profile appear...)

How this works is that a ondragstart function in MyFaceSpace puts multiple values into the datatransfer object based on scraping the information from the user profile, which has been marked up using the hCard microformat. When gets the ondrop event, the transfer object has values for "fn", "photo", "foaf:interest" and "status" that it can use to create a new profile object. (Note that the property names I've used in the transfer are a mix of vCard and FOAF property names)

Now, another interesting thing... try dragging the profile image from MyFaceSpace onto the Weather widget in the last blog post (you'll probably need to open that in a new window, too, unless you have a really big screen). You'll notice that the weather is now displayed for the person's location. This was also part of the transfer data that MySpaceFace created - but in this case its information that's ignored by, but is of use to the weather widget.

So while drag and drop is undoubtedly cool, drag and drop with standardised microformats for drag data takes this feature to a completely new dimension. Imagine if any profile image in any site can be used to move profile data between friends lists in different applications - or you can drag titles of events from listings sites straight into a schedule app, or a train timetable site. I think its fair to say there are one or two applications of this feature. Which is why I'm quite surprised no-one is really shouting about this yet - I think a few good demos and everyone will be demanding HTML 5 in their browser right away!

main archive