jQuery - stopping a hover event while dragging

Question

I'm creating a drag and drop image environment, where if you hover over an image, a small menu pops up overtop of it. if you click and drag the image, you can reorder them.

The problem I'm having is, I want the hover event to be disabled when you're dragging around. Currently if you drag an image around, it triggers all the hover menus on the other images you hover over.

$('ul.imglist li').mousedown(
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });

// Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  });   

I have a bit of jQuery here, the bottom hover event is the one I want to disable while dragging, the top mousedown is what gets rid of the menu when you click on the image. I need something that will disable the hover while moving the mouse around, with the key still pressed down (dragging).

I tried a few things with no luck, does anyone have a suggestion?

Answer 1

there are hundreds of ways.

    // Image actions menu
$('ul.imglist li').hover(
  function() { 
    $(this).find('ul')
      .css('display', 'none')
      .fadeIn('fast')
      .css('display', 'block');
  },
  function() { 
    $(this).find('ul')
      .fadeOut(100); 
  }); 

should be on mouseup event... then on mousedown even you can cancel the hover event. by the way look up binding and unbinding

but why not use the draggable ui ? and save yourself some time end effort