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

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

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

Solution 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/

Comments

[user547794]

Thanks! after a lot of searching this fixed my issue.

[Antony]

$(this) appears to refer to the parent container (ul). To get the individual element (li), use the ui parameter that the helper function accepts: helper: function (event, ui) { return ui.clone().css("pointer-events", "none").appendTo(".container").show(); }

[stack reader]

You sir, are a hero! Thank you!