Drag & Drop: Click over img-tag interrupts events in IE

[David Navratil]

Hello together,

this is my first time posting here, maybe I should introduce myself; my name is David Navratil - Dave will do - and I am working on my final project for my studies at a web programming school.

First off here is the piece that makes me go wild:
http://www.mobil.org/photograph/test.html

There are 3 boxes at the left. When you click "testtest" in the top, you should be able to drag the first box from top. The second box should be draggable normally and so should be number 3.
You can drop the boxes into the big gray box at the right. I know it´s not really pretty, but that makes it simple I hope.

I wrote my own Drag & Drop classes for this, which you can find here:
http://www.mobil.org/photograph/js/dragdrop.js

Now the problem:
Everything works fine (there are actually some minor problems, but nothing problematic) apart from one thing: when trying to drag box nr. 3 in Internet Explorer (my version is 7.0.6001.18000 on Vista, if that helps), it hangs itself up after a small amount of movement. After releasing the mouse button, the dragging doesn´t stop, in fact it begins to work at that moment.
The reason:
I found out why it behaves this way, but I can´t figure out, how to solve the problem. What happens at the moment I click the 3rd box is: the onmousemove-Event stops working. Same happens to the onmouseup-Event, which is why the dragging doesnt drop :) after releasing the mouse-button.
The line for the event is 84 in dragdrop.js:
window.document.onmousemove = this.mousepos;
This happens only with box nr.3, because, as I figured, it contains an img-tag. When using a trigger for the Drag & Drop, which is not an image, like text, for example, or a color-filled div, it works like a charm.

------------------------------
SO THE PROBLEM FOR ME IS :
------------------------------

When pushing a mousebutton directly over an img-tag, events stop firing until I release the mousebutton.
I also tried: window.document.attachEvent("onmousemove",this.mou sepos);
and I also tried leaving the "window." away. It won´t work. There are also no styles or special treatments for img-tags in this testpage, which could be the reason, everything is inline.

I have been searching about this for last 5 hours and to be honest, I don´t even really know how to call this problem, so I have trouble finding anything on the net.
Hope you people here like having some fun with these things as I do; I just can´t help myself this time.

Before I forget: don´t suggest using frameworks please, I only trust my own code!; I am one of the crazy people.

Best Regards,
Dave

[David Navratil]

I found the problem, it was as stupidly easy. Browsers have these built-in Drag & Drop functionality for images. While using these, events stop working. After having added the following, it worked fine:
document.ondragstart = function(e) { return false; }

The reason I didn´t have problems in Firefox were that I had already put "return false;" into my onmousedown function, which did the job for FF.

Best Regards,
Dave

[David Navratil]

Now everything is gone. :)
Could´ve guessed that by the way. I wouldn´t ever try to explain that humour to my boss, ha.

[MMcCarthy]

It's not gone David. It's just been moved to here.

Mary

[David Navratil]

Oh, thank you very much Mary.

Dave