Programming on the Edge

Flex Native Drag-and-Drop: The Massive Hack

Published by Matt Hicks under , , , , , , on Friday, December 28, 2007
I had made the commitment a while back that I was going to add complete and perfect drag-and-drop support to jSeamless. The Flex Implementation proclaims support for DnD so I've just pushed off the investigation up until recently. However, now that I've come to implement this great functionality I realize that there is absolutely no support for native DnD. What I refer to as "native DnD" is the ability to drag a file or any other "draggable" content from outside of the application into the application and allow it to pick up and use that content.

Okay, so I figure I'll just do the same type of JavaScript hacks I've done all along to get missing functionality into Flash. To my surprise HTML/JavaScript has no native DnD support either. At this point I'm not only surprised, but afraid my dream of a beautiful drag-and-drop solution for jSeamless is in danger of never reaching fruition.

So I spent the day brainstorming with a colleague about how this can be done. Honestly, there was never a viable solution that wasn't a massive hack, and what we ended up with was actually far better than expected. The solution consisted of using a signed Java Applet to display a single pixel JWindow linked to the cursor when the cursor enters the browser window, it is able to use this as a check to see if the cursor is dragging a droppable item. If it is not carrying something into the browser it then disables itself until the cursor leaves the browser and re-enters again. However, if it is carrying something it remains locked to the tip of the cursor and accepts the droppable wherever they drop it in the application. This JWindow intercepts the drop event, passes an event to JavaScript, JavaScript passes an event to the Flash content and is handled appropriately from there. The event is assigned an ID that can be referenced back from the Flash, to the JavaScript, to the Applet in order to initiate the download at any point in the future.

Yes, this is a massive hack, but does provide a solution that is quite seamless to the user apart from the nasty, "Would you like to grant access to this application to do whatever it wants to your hard drive?" (okay, so it's a little friendlier than that) prompt that must be displayed for the Applet to be able to know pointer location and be able to actually read the file contents from the hard drive.

Fortunately internal drag-and-drop is quite easy to write into Flex. If all goes well, this will all be finished and useful in jSeamless next week. However, for reasons of the aforementioned "evil prompt" it will be disabled by default and will have to be specified to be turned on to be used.

Today was massive hack day. ;)


Jules said... @ November 21, 2008 at 7:55 AM

Umm... ok, old post but dude I just had to comment. You deserve some kind of reward or recognition for the absolutely outrageous nature of this hack ;-)

Does it actually work reliably? We would seriously consider it at this point... JVM dependencies, security warnings and all.

Love the 1x1 pixel JWindow that follows the cursor. Lol!

Unknown said... @ February 23, 2009 at 12:48 PM

Whatever became of this? Is your hack released as open source or anything? I'd be interested. I can take what you describe and repeat it but ...

Matt Hicks said... @ February 23, 2009 at 2:16 PM

There were ultimately some issues with this that were never resolved. It ended up not being important enough of a problem to take any more time making it into even more of an elaborate hack.

Post a Comment