6 November Drag’n'drop from HTML to Flash

Posted by Gert-Jan on in Flash+ActionScript, Javascript

Last week we released a new Floorplanner account, the Enterprise account. With it, companies can have an online Floorplanner solution completely branded to their wishes. It includes the Roomplanner module and a custom library of their own furniture elements.  Steelcase and Maxon are the first to have an active Enterprise account.

The interesting part of this release, from a tech point of view, is the new drag-and-drop functionality. The Roomplanner is running in the Flash Player. However, the library of furniture elements is in HTML. We chose to build the furniture library in the HTML sidebar for a couple of reasons. It’s not in the Roomplanner, so there is more space left to design. It gives us more freedom in the page layout. All items on the page are indexed and things like sorting and tags we’re easier to build in Ruby on Rails than in Flash.

Now we only needed a way to get the furniture from the sidebar to the Roomplanner. That’s where the drag’n'drop comes in, drag from HTML and drop in Flash. To drag an image of a furniture element in HTML we used the fantastic JavaScript script.aculo.us framework. The next step was to swap the image to an element in the Roomplanner and to update the position of the element while moving the cursor on the Flash content. For this we used ExternalInterface to communicate between JavaScript and ActionScript. That’s all there is to it. The theory is actually quite simple, but in practice it was very (I repeat, VERY) difficult to get it working in all the main browsers. All those nitty gritty browser details…

At this moment everything seems to work just fine, so please take a look at Steelcase and/or Maxon and let me know what you think!

Tags: drag, drop, externalinterface, Flash, html, Javascript, script.aculo.us

4 Responses to “Drag’n'drop from HTML to Flash”

1. Mike Ivanov Says:
   November 19th, 2008 at 7:25 am

   Very cool and seamless! Can you share a bit about the implementation details?

2. Willem van Bergen Says:
   November 20th, 2008 at 5:52 pm

   I can give you some details about the Javascript implementation. We use the Draggable object from Prototype to implement this. However, there are a lot of gotchas that you have to take into account. We have therefore implemented some event handlers of the Draggable object to overcome those.

   • Once the drag action starts, we register the element as new object in the Floorplanner application using a Javascript API call. Because the mouse is not over the Flash application, we make sure it is not yet visible.
   • The “ghosting” functionality of Draggable will make browsers crash, so we emulate this behavior by placing two pictures on top of eachother. The top image will be the one that is being dragged, the bottom one will remain in the sidebar.
   • We catch the mousemove events to update the position of the element in the Floorplanner application, again by a JS API call. The z-index of the Floorplanner application should be higher than the z-index of the picture that is being dragged, so the picture will be dragged UNDER the Floorplanner Flash application.
   • When the element is being dropped on the Flash application, the element is on the correct position. Note that the picture that was being dragged is now UNDER the Flash application. We update the location of this picture to its former location. The “auto-revert” option of Draggable will make some browsers crash, so we had to emulate it!
   • When an element is dropped outside the Flash application, the element is removed from the Floorplanner application by a JS API call and we move the picture that was being dragged to its former location, on top of the “ghost-image”. Determining whether the element is being dropped on the flash application or outside of it has some gotchas in Firefox if I remember correctly, so be aware of those.

   Hopefully this clarifies the implementation a bit! As a last remark, you really have to be careful with Javascripts events in different browsers when Flash is involved. Some browsers simply will not fire an event, other events will not bubble correctly and some events have different parameters among the different browsers. This makes it really tricky to get it right.

3. makc Says:
   November 23rd, 2008 at 8:04 pm

   There’s a little bug though, if you drag and drop in 3D mode, and then go back in 2D, you see that drops were not ignored. Ok, maybe that’s not a bug, but dropping something onto invisible view is counter-intuitive at least.

4. Willem van Bergen Says:
   November 24th, 2008 at 1:04 pm

   Thanks for reporting this. We will certainly address this issue, as it is indeed very counter-intuitive.

Leave a Reply