can't cancel default dragover after animating

can't cancel default dragover after animating

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?