jquery перетаскиваемый и наводимый мышью

Я только что узнал, что это очень логичная проблема. Как только вы начнете перетаскивать элемент, он останется под указателем мыши. Следовательно, он будет просто зависать над текущим элементом все время!!

Исправление (не очень красивое) состоит в том, чтобы установить параметр cursorAt, чтобы указатель мыши находился за пределами перетаскиваемого элемента:

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

Было бы намного лучше, если бы был способ каким-то образом передать указатель мыши под перетаскиваемым элементом, но пока я не нашел для этого решения.

Надеюсь, что это помогает немного!

Как указал Марсель Паанс, проблема заключается в том, что помощник застревает под курсором мыши.

Решение состоит в том, чтобы установить свойство CSS pointer-events на none вспомогательного элемента. Это позволит событиям указателя срабатывать на элементах под помощником.

Вы можете сделать это легко, предоставив вспомогательной опции обратный вызов для создания вспомогательного элемента:

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

Этого можно добиться, используя «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: для этих предметов..?

Кредиты и дополнительная информация:

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

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

Вы можете написать обработчик события перетаскивания для вашего перетаскиваемого объекта, который проверяет, находится ли курсор над элементом, для которого вы хотите обработать событие наведения мыши. Вам нужно будет определить наведение мыши самостоятельно, используя методы jQuery offset(), width() и height() для статического элемента и либо позицию курсора из объекта события для события перетаскивания, либо собственный ui.offset пользовательского интерфейса jQuery, в зависимости от того, что лучше подходит для вашей цели. .

Другой вариант, менее элегантный, но, вероятно, более простой в реализации, состоит в том, чтобы сделать ваш статический элемент выпадающим, и в этом случае пользовательский интерфейс jQuery позволяет вам обрабатывать событие, когда над ним находится перетаскиваемый элемент. Затем вы можете предотвратить падение, если вы на самом деле не хотите его разрешать.

Основываясь на том, что опубликовал Йонатан:

Ваш JS:

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

Просто добавьте это в свой CSS:

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

немного чище.