jquery draggable and mouseover

aepheus picture aepheus · Jul 1, 2011 · Viewed 13.7k times · Source

I currently have some dropdown menus which open on mouse over. I'm implementing some drag-n-drop features using draggable and droppable from jquery ui. It seems that the mouseover events for the menus do not fire when dragging, is there a way to allow them to work?

I've implemented it as follows (simplified):

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' });
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');});

Answer

Marcel Paans picture Marcel Paans · Sep 4, 2011

I just found out that this is a very logical problem. Once you start dragging the element, it sticks under your mouse pointer.. hence, it'll just hover over the current element all the time!!

A (not so pretty) fix is to set the cursorAt option so the mouse pointer is outside of the draggable element:

$('#some_id').draggable({
      cursorAt: {left: -10, top: -10}
});

It would be much nicer if there is a way to somehow pass the mouse pointer underneath the element that is being dragged, but so far I haven't found a solution for that.

Hope this helps a bit!