CODEWITHSUNDEEP
jqueryjquery-uidrag-and-drophoverjquery-events
Dave Hunt
Dave Hunt

Reputation: 711

jQuery - stopping a hover event while dragging

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?

Upvotes: 3

Views: 2944

Answers (2)

JRodl3r
JRodl3r

Reputation: 1848

.hover-off {
  pointer-events: none;
}

...to the rescue: Paul Lewis + thecssninja.com w/ a pretty nice, 1-stop solution.

http://www.thecssninja.com/css/pointer-events-60fps

Upvotes: 3

Val
Val

Reputation: 17522

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

Upvotes: 0

Related Questions