jQuery Forum

Hi,
I have a <ul> with <li>'s inside. When I drag something over an <li> it will animate. I then want to cancel the default dragover handler so that I can enable drop on this <li> (I am targeting Google Chrome only, so I only need to cancel the dragover event to enable dropping).

1. $('li').bind("dragover", dragoverCallback);
2. function dragoverCallback (event) {
3.       var target = $(event.target);
4.       target.unbind("dragover", dragoverCallback);
5.       target.animate({'left':'100px'}, {'complete': function() {
6.             target.bind("dragover", dragoverAnimationCallback);
7.       }});
8. }
9. function dragoverAnimationCallback (event) {
10.       var target = $(event.target);
11.       // if I comment out the following line, it will work, but then this callback function is getting hammered
12.       target.unbind("dragover", dragoverAnimationCallback);
13.       event.preventDefault();
14. }

However, I see that after the animation, dropping is allowed for a split second, and then the default behavior (not allowing drop) happens again. I'm not sure why. If I comment out line 12, it will work, but then I'm not unregistered the callback, which seems bad.

Why is the default not being prevented?