jquery ui: draggable -> if drag unbind hover event??

Question

hi guys, i have a rather weird problem that should fix a bug in my current project. I'm working with a lot of thumbnails randomly positioned on the webpage. all thumbs have an absolute position. this thumbs react on a hover set by jquery:

$(".thumb").hover(
  function () {
    $(this).stop().animate({"height": full}, "fast");
    $(this).css('z-index', z);
    z++;        
  },
  function () {
    $(this).stop().animate({"height": small}, "fast");
  }

so on hover they resize to a specific height. Moreover all these thumbs are draggable via the jquery ui-draggable plugin.

I wonder if it is possible to UNBIND the hover of these thumbs if a thumb is currently dragged!

$( ".thumb" ).bind( "dragstart", function() {
      //$(this).draggable( "disable" );
      $(this).unbind('mouseenter mouseleave');
    });
    $( ".thumb" ).bind( "dragstop", function() {
        //$(this).draggable( "enable" );
        $(this).bind('mouseenter mouseleave');
    });

this is not working at the moment. I simply want to disable the hover event if i'm currently dragging a thumb. On dragstop the hover should work again.

Any idea how i could solve this? thank you

Answer 1

How about mousedown and mouseup.

$( ".thumb" ).bind( "mousedown", function() {
  //$(this).draggable( "disable" );
  $(this).unbind('mouseenter mouseleave');
});
$( ".thumb" ).bind( "mouseup", function() {
    //$(this).draggable( "enable" );
    $(this).bind('mouseenter mouseleave');
});

Although I'm not sure the purpose of your unbinding. There may be another way. Anyway, the mousedown and mouseup should trigger the start and stop of your drag.

Just remember, if a user does a normal click, the handlers will be bound and unbound every time.

Answer 2

the purpose is that if i drag a thumbnail very fast over another one, the mouse leaves the current-thumbnail and it triggers the hover of another thumbnail. this is actually a rather buggy effect. so i wonder how i could solve this problem!

the UI of my website works like this: If i rollover a thumbnail it gets layered on top (z-index++), the thumbnail gets resized a little bit bigger and it's draggable. So currently if there lie like 10 thumbs randomly on my webpage and i drag them around really fast it works properly but somehow it feels a little bit buggy due to the fact that if i drag the images too fast the dragged image doesn't really follow the speed of the mouse - so a hover-out is triggered. Therefore i want to disable EVERYTHING set with jquery (hover event, and the abilty to drag) from all thumbs except of the current dragged one. sounds complicated i know! ;) maybe someone gets it!