Search code examples
jquerydrag-and-dropdraggablemouseover

jquery draggable and mouseover

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');});
Solution

  • 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!