jQuery Drag / Drop проблема: mousemove Событие не является обязательным для некоторых элементов - PullRequest
Новая
       18

jQuery Drag / Drop проблема: mousemove Событие не является обязательным для некоторых элементов

2 голосов
/ 19 августа 2009

Использование последней версии jQuery / UI, размещенной в Google. У меня есть следующая разметка: 

<ul id="tree">
    <li><a href="1/">One</a></li>
<li><a href="2/">Two</a></li>
</ul>

И следующий javascript: 

$(document).ready(function(){

    // Droppable callbacks
function dragOver(overEvent, ui_object) {
    $(this).mousemove(function(moveEvent){
        console.log("moved over", this);
    });
}

function drop_deactivate() {
    $(this).unbind();
}

function drag_out() {
    $(this).unbind();
}

// Actual dragging
$("#treeContainer li").draggable({
    revert: true,
    revertDuration: 0
});

// Actuall dropping
$("a").droppable({
    tolerance: "pointer",
    over: dragOver,
    deactivate: drop_deactivate,
    out: drag_out
});

});

Если я перетаскиваю первый li вниз над вторым, запускается функция mousemove (и firebug регистрирует вывод). Но если я перетащу второй li вверх над первым, функция mousemove не сработает. Вы можете увидеть это в прямом эфире на http://jsbin.com/ivala. Есть ли причина для этого? Должен ли я перехватывать событие mousemove другим способом?

Редактировать: Похоже, что событие mousemove () не является обязательным для более ранних элементов, чем тот, который в данный момент перетаскивается (должен быть связан при наведении мыши).

Ответы [ 3 ]

7 голосов
/ 14 ноября 2011

Похоже, что вспомогательный элемент Draggable поглощает события перемещения мыши. Если курсор находится над помощником, контейнер под ним не будет получать события перемещения мыши.

Попытайтесь расположить вспомогательное смещение от курсора, чтобы курсор никогда не располагал вспомогательный элемент непосредственно под ним. Вы можете сделать это с помощью параметра cursorAt у draggable:

draggable({ cursorAt: { top: 5, left: 5 } })

2 голосов
/ 21 мая 2017

Это то, что я сделал, и это работает. 

$(dragMe).draggable({ 
   start : function(e){
             $(this).css({'pointer-events': 'none'});
         }, 
   stop: function(e){
             $(this).css({'pointer-events': 'all'});
         }
})
1 голос
/ 18 декабря 2014

Вы можете попробовать добавить CSS-стиль pointerEvents к вашему помощнику. Таким образом, все события будут проходить через перетаскиваемый элемент. 

clone.css('pointerEvents', 'none');

С полным перетаскиваемым материалом: 

element.draggable({
    helper: function() {
        var clone = element.clone();
        clone.css('pointerEvents', 'none');
        return clone;
    }
})
...