Resolved Drag Drop Problems in Firefox

Skotty · 08-25-2008, 11:37 PM

Has anyone encountered a problem in Firefox when using drag and drop script where when attempting to drag, the icon changes to a circle with a slash through it?

I'm using a custom drag and drop script. In my initial demo pages, it works fine in both IE and Firefox. But when I integrated it into a JSF application, Firefox started having problems (it still worked fine in IE).

Essentially what happen is events stop firing until the mouse button is released, at which point one final onmousemove is fired but the onmouseup is not. It's almost as if Firefox thinks it can't fire off the onmousemove events fast enough and decides to just give up until the drag is over. However, once the drag is over, since the onmouseup doesn't fire, it continues to behave as if you were dragging, at which point the dragged item can be dragged around the screen with no problems.

Has anyone encountered this or something similar before? Did you figure out what the problem was? Did you find a solution?

I would include an example, but the examples (at least so far) always work. Seems the page has to get complicated before the problem surfaces.

Thanks.

Skotty · 08-26-2008, 02:50 PM

I traced the code to see what the last line of script executed is before it stops working. Interestingly, I found that the move operation is fully completed each time.

A little more detail on the behavior -- it doesn't stop working right away, each time the drag works for about 4 or 5 pixels before it stops working. And I was wrong before when I said it fires the onmousemove 1 last time when the mouse button is released...it actually fires the onmousemove 2 times when the mouse button is released.

I'm wondering if maybe there is some other script on the page that would cause this problem. Maybe another script that is trying to buffer information or something, causing out of memory situation or something. Anyone have any ideas?

Skotty · 08-26-2008, 02:56 PM

I just now came to the following realization -- the drag handles are currently images. Firefox has behavior where it allows you to drag images off to other windows, or on to the desktop. This is likely interfering with the drag operation. I'm pretty sure this is the problem. Now to look for a solution.

Skotty · 08-26-2008, 03:11 PM

Yay! I just solved the problem.

The solution in Firefox (at least in my case) is to call event.preventDefault() in the onmousedown event handler.

Code:

function handleMouseDown(event) {
	event.preventDefault();
	...
}

A second solution is to return false from the onmousedown event handler. This also works.

Code:

function handleMouseDown(event) {
	...
	return false;
}

<sometag ... onmousedown="return handleMouseDown(event)"/>

I still don't know the exact scenario that causes the problem since it's not always needed...probably the element nesting plays a part.

Hopefully this thread helps someone else someday.

terminon · 09-02-2008, 06:05 PM

I've been trying to figure out how to get around the image drag-drop behavior for a while now. I had tried return false, but for some reason it wasn't working (perhaps it is because of the way I am chaining functions together on mousedown, etc) -- anyway, preventDefault() does the trick beautifully. Thanks!

Maulkye · 10-01-2008, 02:18 AM

I had a similar problem and a similar solution works, but what if you need that event to propagate up to multiple containers for the initial event recipient? I don't want to have to terminate the entire chain of "mousedown" events just to stop this behavior.

I guess I can fire it manually after I intercept the event, but I'll have to handle that outside of normal protocol.

Is there a better way? Surely the bright folks over at FF central thought about this beforehand and have exposed a method, yet unknown to myself, that will disable this?

Thanks,
Maulkye