Javascript drag and drop problem

[asmielia]

Hi,
I developed drag and drop functionality for my web app a while ago and it's been working fine. My app runs exclusively on IE 6 & 7. I have my own custom logic to capture mousedown and mouseup events on the elements you can drag, and I just create a ghost of the element to follow your mouse cursor around, the actual element being dragged never moves. The elements capable of being dragged were divs. But recently, I needed to make the change to use images, and that's where my problems started.

The drop targets are also divs/images, and I capture mouseovers/mouseouts to highlight them as drop targets.

So the problem I'm having is that since I switched to images, events fire normally until I try dragging an image. Once I do that, the events being fired make no sense anymore. It seems like mouseover/mouseout events are firing for the element being dragged when I hover over ANY other element. Those should only be firing when I mouse over or mouseout that particular element.

Here's a simplified example of what's happening:

var img1 = document.getElementById('image1');
var img2 = document.getElementById('image2');

img1.onmouseover = mouseOverImage1;
img2.onmouseover = mouseOverImage2;

Now when I start dragging image1 around, and I drag it over image2, the function mouseOverImage1 will get called. Very strange.

Even more curious, is that I've found out that by moving the focus away from the window, and then back onto it while I'm dragging an image, the event handlers begin firing as normal again. This is not a valid fix, but very odd behavior.

So I'm totally stumped. If anyone has any ideas, please help me out.

Thanks,
Adrian

 

[amromousa]

You might try using scriptaculous for drag/drop support instead -- I can't comment on your implementation without more information.

http://script.aculo.us

Good luck

 

[devourment77]

jquery UI has some drag/drop features too I believe.

 

[asmielia]

Hey guys, I'm already using another library called MooTools. If anything, I regret using any library. Mootools is pretty slim compared to some other libraries out there, but it's still too slow a lot of times. I use native javascript as much as possible. Mootools has built in drag and drop but nothing allows as much control as writing it yourself, which is what I've done. It's been working fine, up until I switched divs for images. The only thing I could think of with images is that Internet Explorer has built in drag and drop support for text elements and images. I was worried that IE's built in d&d was kicking in and causing weird behavior, but I don't think that's the case. I've disabled all of IE's drag and drop events at the document level.

Anyone else have any other suggestions?

 

[mxpxrulzz]

kind of a workaround, but since its working for divs, how about you set the background image and height and width with an inline style, that way the user sees the image but the code sees a div?

 

[asmielia]

Thanks. I'll give that a try tomorrow. Sounds like it should work.