• 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.