jquery перетаскиваемый и наведением мыши - PullRequest
Новая
       32

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

5 голосов
/ 01 июля 2011

В настоящее время у меня есть несколько выпадающих меню, которые открываются при наведении мыши. Я реализую некоторые функции drag-n-drop, используя dragggable и droppable из jquery ui. Похоже, что при перетаскивании события наведения мыши для меню не запускаются, есть ли способ, позволяющий им работать?

Я реализовал это следующим образом (упрощенно): 

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' });
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');});

Ответы [ 5 ]

13 голосов
/ 04 сентября 2011

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

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

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

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

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

12 голосов
/ 29 апреля 2013

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

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

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

$('#some_id').draggable({
    helper: function() {
        return $(this).clone().css("pointer-events","none").appendTo("body").show();
    }
});
4 голосов
/ 25 июля 2012

Это может быть достигнуто с помощью «over:» и «out:», где определяется ваша буква.Я предполагаю, что это не совсем то, что вы хотите (я предполагаю, что вы пытаетесь перейти к чему-то, что находится в меню, а не весь раскрывающийся список).Возможно, просто ничего не делайте или вернитесь к функции drop: для этих предметов ..?

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

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

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

0 голосов
/ 28 июня 2017

На основании того, что написал Йонатан:

Ваш JS: 

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

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

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

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

0 голосов
/ 15 марта 2012

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

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

...