Why does my custom drag and drop script fail?

Question

Hi all,

I am currently trying to code my own JS drag and drop script (out of sheer curiosity and boredom, I know it would be much easier with a framework). My aim is a fully working FF3 version , IE can wait for now.

I just got stuck on a weird bug. When I drag the div for the first time, it works ok. When I drag it for the second time, it does not stick after releasing the button and I have to click once more to get it down. Third and consequent drags work flawlessly again (!?!).

Please see [the original page][1] (as I said, FireFox only for now) for an idea of what happens. The whole thing is done as a div with two events (onmousedown and onmouseup) using document.captureEvents(Event.MOUSEMOVE) for the intermediate movement. The script can be found [here][2] (disregard the bottom ajax part, it is prepared for some additional tricks and the bug stays if I take it out).

Please let me know if you have encountered something similar in the past or if you see a mistake somewhere. I know there may be better ways to go around the whole thing but I am specifically looking for a way to make my approach work.

Thanks for your time,

Mike

EDIT: Chrome and Safari work.

EDIT: Taking the links offline, working on new version.

Answer 1

Well first up this works for me in FF3 if that's what you're asking.

This isn't going to be what you want to hear, but I strongly recommend you pick up a DnD method from mootools or jquery or similar. Just from an efficiency standpoint, DnD is a horrible thing to code up (done it a few times myself) and if you're not capable (no offence meant here) of resolving the numerous bugs that come up it's just going to be a huge drain of your time compared to just going with a robust mature implementation off the shelf. It is a hard thing to do.

If you do what to continue with your own code (as an exercise or out of pride - I can appreciate that :) ) this kind of problem is typically the result of either an event not being captured where you think it is because some other event got in the way first, a flag not being set where you think it is, or (or because of) an error which breaks out of your code at an unexpected point. Try and trace logically what's happening by logging out the event triggers.

If you could define how it wasn't working in more detail I might be able to trace it further (since I seemingly can't replicate), but I do suggest you explore the benefits of a solid library.