HTML5 drag and drop, Spotify and Yahoo! Music.
Jump straight to the exciting demo.
Drag and drop has been around on the desktop for ages. The web eventually caught on but it was a bit rubbish. Wouldn’t be it be nice if your web applications interact with your ‘real’ applications? Thankfully, HTML5 is great. There’s a whole load of drag and drop events to play with but the most exciting thing (please remember exciting is a relative term) is the dataTransfer property.
All drag events have associated data. The data can come from other elements on the page, other browser windows, local files or other applications. The dataTransfer property contains the good stuff. You can read more about the dataTransfer property at the Mozilla developer centre.
In the demo below we drag a song from Spotify into the browser and see if we can find a music video for it on Yahoo! Music.
When you drag a track from Spotify you are actually dragging a small chunk of HTML (along with some other bits of data). In this example we grab the artist and track from this data by binding the following to our drop event:
event.dataTransfer.getData('text/html');
Now we have the chunk of html (it’s a link) we can form our YQL query string. e.g.
SELECT * FROM music.video.search WHERE keyword='London Calling'
Using the data we get back from Yahoo! we can grab the id of the video and embed it with good ol’ SWFObject.
The exciting demo
To try this out you will need Spotify and Firefox 3.5+ or Safari 4.0.5+
If Yahoo! can’t find any of your tracks then you can play the ones on our playlist.
You can see more demos and read a good article about HTML5 drag and drop on decafbad.com