AS3 and HTML5 drag and drop in Chrome and Firefox

I’ve been looking into this over the last couple of days and there are a few good posts explaining how it all works in html and also an example from Mario Klingemann in AS3, which unfortunately now only works in Firefox 3.6.

http://www.quasimondo.com/examples/draganddrop/dragAndDropFFF.php

http://www.html5rocks.com/en/tutorials/dnd/basics/

http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Current Limitations

After playing around with this for a while i think it’s best to give a quick rundown of the limitations that exist at this point in time. Or at least the ones i’ve come across.

Safari 5.0.5

Although the drag and drop detection is implemented in this version, there is currently no support for the FileAPI and more importantly within this, the FileReader class. This has several methods, one of which is readAsBinaryString(), which is used to convert a File Object from binary into a UTF-16 encoded string, which can then easily be passed to a swf to convert into a ByteArray and be displayed as an image.

There is a workaround for this, that involves sending the image straight to the server and then reloading it, which can be seen here,

http://www.smilingsouls.net/Blog/20110413023355.html

This is hopefully supposed to be implemented in Safari 6.

FireFox 4.0.1 and 5.0

So although it was possible to get it working in 3.6, a few things have unfortunately now changed in this release. Firstly the ‘dragleave’ event has stopped working when you mouse out of the browser window when still dragging an item. This is a registered bug on mozilla.

Secondly and more importantly, as anyone who try’s Mario’s example in 4.0.1 (and also 5) will find, you can no longer drop an item on an embedded swf. It appears that the default behaviour in Firefox 4.0.1 (unlike Chrome and Safari), that is, when no drag behaviour has been added to the div, will not allow an item to be dropped on an embedded swf to replace that swf in the browser (i’m not sure if this is only restricted to 4.0.1? Edit – although this is also the case in 3.6.18, it will allow you to drop the item on the swf, it just doesn’t load it into the browser). It now also performs in that way, even when the drag and drop behaviour has been added, so although you can detect the ‘dragenter’ and ‘dragover’ events, the ‘drop’ event does not get fired, it just reverts back to the default behaviour described above.

If anyone knows of a way of preventing this behaviour, then i’d be interested to know how it’s done. Or whether it’s simply a bug in the new version?

Update – After a bit of poking around and help from the bugzilla team, i’ve managed to find the solution to this, so now have it up and running in Firefox 3.6.18, 4.0.1 and 5.0, as well as Chrome (only tested in 12.0.742.100).

The issue and explanation can be found here.

Opera and IE

HTML5 drag and drop will possibly be supported in the next versions.

Chrome

The consolation is, i’ve managed to get it working in Chrome (tested version 12.0.742.100). I did come across one problem when attempting to pass the UTF-16 encoded string back to the swf from the javascript, whereby the data was fine in the javascript, but was being received as null in the swf. This turned out to be an issue with the UTF-16 encoding (it worked fine as base64 or UTF-8) and i managed to get it working by simply calling encodeURI() on the string before it was sent and then decodeURI in the swf. This was not an issue in Firefox, it only occurred in Chrome.

Conclusion

Having spent some time looking at the WC3 specs to better understand this and attempt to create a solution for AS3, it appears that (although this isn’t even correctly or completely implemented across most browsers and not even supported at all in others), the current version is already depreciated? So who knows when this will actually be properly supported by all. Just be aware that whatever you try to build now, there’s a very high chance that it will no longer function correctly in the next release of the browser. As was seen from the switch to Firefox 4.0.1 fr0m 3.6.

I’ve got it fully working in Chrome (demo here – this also works in Firefox 3.6.18), but it only works on a server, not when run locally. I also attempted a Firefox 4.0.1 hack/workaround (demo here) that has an absolute div over the top of the div that the swf is embedded in, to detect the drag and drop events. This actually works, but throws up a load of other issues. As i said, it’s a hack. Hopefully the issue i outlined above in the ‘FireFox’ section will be resolved and then the chrome example should fully work in FireFox as well. NOTE – I’ve just tested Firefox 5  and all the same issues  unfortunately still exist.

Now up and running in Chrome (12.0.742.100 – only runs on server or localhost, not when run locally) and in Firefox 3.6.18, 4.0.1 and 5.0. The demo can be seen here.

The example and source code can be downloaded here.