Problem with javascript-based drag&drop and flash objects

Started by
2 comments, last by benryves 14 years, 4 months ago
Been trying to wrap my head around this. I've got some &#106avascript code that handles drag&drop correctly, while building a browser-based AJAX game engine. Recently we added the option to have an icon of the drag procedure, an image, that follows the mouse as you drag an item. Then, we added some flash objects, including Youtube video. This is where weird things started to happen, because after a drag procedure, the flash objects would respond to "phantom clicks". I don't know if this is an error on my Event Handler, but that is what is happening, after a drag, while I move the mouse over an Youtube object video, it sometimes signals a click, and starts playing, or opens up full screen in a new window, although, like I said, all I did was move the mouse over the flash object. Could it be that certain events weren't handled, and laid in some loop, like phantoms? Ghost clicks? Any help or nudge in the right direction would be invaluable, thank you.
Advertisement
Does this affect all browsers, or just one specific one? How are you embedding the Flash video (have you tried different wModes?) I haven't been able to replicate this with the dragging and dropping functionality offered by MooTools.

When hidden under a translucent div, I can't interact with Flash animations - as a last measure hack, you could try hiding Flash animations this way during a drag operation, though you may have the same issue as before.

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

Thank you for your quick reply.

This behavior is happening in Firefox, Opera and Chrome, this script is still not IE compatible, but I already knew that.

I've added some debugging to my event handling class and it seems that, with no big surprise, whatever event the flash is receiving, it gets it before it is processed by the event manager.

In other words, the flash receives a "click", and opens on another page (as is expected when you click a Youtube embedded video), before my event manager even gets a onmouseup event from the end of the drag (when you finish dragging, you release the left mouse button, thereby generating the onmouseup event).

I'm not knowledgeable with MooTools, but my guess is that they either have a better event handler, or have coded some tricks into the dragging process, like a whole-page transparent div.

But that would open up a whole another can of worms, because most drag & drop scripts, mine included, process the "drop" when you finish the drag and do a onmouseup, releasing the left mouse button.

On that onmouseup event you get the name of the element directly beneath the mouse cursor. This gives you the end of the chain on the drag & drop, you have the starter object, this process gives you the end object.

Of course I could process the whole DOM tree and see what is beneath the mouse cursor, but that would entail zIndex processing, which I really would prefer not to go into...

Any thoughts? Is it possible to, once the drag has started (and using pure &#106avascript of course), to disable the passing of clicks/mouse events onto the page?
I can't see anything especially tricky in the MooTools source code for handling dragging, sorry. It seems very weird that a drag operation could be interpreted as a click operation - I'm really sorry, but I have no idea what could cause it!

Would you be dragging onto Flash elements? If not, you could use the translucent div trick, but draw them in front of the Flash elements rather than the entire page.

[Website] [+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++]

This topic is closed to new replies.

Advertisement