Question

I’m trying to see how drag & drop works in native javascript. I’m writing a simple javascript function to make it happen. It works, but not correctly.

http://jsfiddle.net/FKM5S/

when you move the white box slowly towards the black box, the white box stops as designed. When you move the white box fast enough, it actually overlaps the black box.

In my javascript code, I check if the white box overlaps the black box then return false.

var beforeMovePassed = this.callbacks.beforeMove();

if( beforeMovePassed )
{
    return false;
}

I’m not exactly sure why it’s happening.

How do i stop the event correctly so that the white box doesn’t overlap the black box regardless of your dragging speed?

Answer 1

Notice that event handler is called not for every change, there is some limit in ms between callings and it depends on many factors.

So for you will be good just each time check is white box are righter the black box, and if it is so, then move it by your self to the correct position.