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

Based on what Yonatan posted:

Your JS:

$('#some_id').draggable({
  helper: 'clone',
  opacity: 0.35,
  zIndex: 20000,
  cursor: 'move' 
});

Just add this to your CSS:

#some_id.ui-draggable-dragging { 
  pointer-events: none; 
}

is a little cleaner.

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();
    }
});

Answer 3

This can be achieved by using "over:" and "out:" where your droppable is defined.

$(".droppable").droppable({
    accept: '.draggable',
    over: function(event, ui) {
       $(this).addClass('temporaryhighlight');
    },
    out: function(event, ui) {
       $(this).removeClass('temporaryhighlight');
    },    
    drop: function() {
        //do some stuff
    }
});

In your scenario, though, you'd have to make your menus droppable, which I'm guessing is not exactly what you want (I'm assuming you're trying to drop to something that is IN the menu, not the whole dropdown). Perhaps just do nothing or revert for the drop: function on those items..?

Credits and more info:

http://forum.jquery.com/topic/draggable-highlighting-custom-div-on-droppable-hover

http://jsfiddle.net/nickadeemus2002/wWbUF/1/

Answer 4

You can write a drag event handler for your draggable that checks whether the cursor is over the element for which you want to handle the mouseover event. You would have to detect the mouseover yourself using jQuery methods offset(), width() and height() for the static element and either cursor position from the event object for drag event or jQuery UI's own ui.offset, whichever fits your purpose better.

Another option, less elegant but probably easier to implement, would be to make your static element a droppable in which case jQuery UI lets you handle an event when a draggable hovers over it. You can then prevent the drop if you don't actually want to allow it.

Answer 5

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!