jquery draggable and mouseover

Question

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 1

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!

Answer 2

As Marcel Paans indicated the problem is that the helper sticks under your mouse cursor.

The solution is to set the CSS property pointer-events to none on the helper element. Doing this will let the pointer events fire on the elements underneath the helper.

You can do this easy by supplying the helper option with a callback to generate the helper element:

$('#some_id').draggable({
    helper: function() {
        return $(this).clone().css("pointer-events","none").appendTo("body").show();
    }
});