Jquery draggable and mouseover

Question

I currently have several drop-down menus that open with the mouse. I implement some drag-n-drop functions using draggable and droppable from jquery ui. The mouseover events for the menu don't seem to fire when dragging, is there any way to let them work?

I 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 an item, it will depend on the mouse pointer. Therefore, it will constantly hang over the current element!

A ( ) , cursorAt, :

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

, - , , .

, !

Answer 2

, , .

, CSS pointer-events none . , .

, :

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

Answer 3

"over:" "out:", droppable.

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

, , , , , , ( , -, , ). , drop: function .?

:

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

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

Answer 4

draggable, , , mouseover. , jQuery offset(), width() height() jQuery ui.offset, .

, , , , , , jQuery , . , .

Answer 5

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

a little cleaner.