jQuery mouseleave не работает правильно при перетаскивании

у меня есть сортируемый список с прослушивателем событий mouseleave, который ведет себя неправильно.

Если я перемещаю мышь В и из сортируемого списка, mouseleave срабатывает правильно.

Если я сначала щелкаю и перетаскиваю одного из детей сортируемого, mouseleave срабатывает неправильно-спорадически или вообще нет.

какие идеи?

спасибо.

update: это происходит и для событий mouseout. 

<style>
#sortable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background-color: #CCC; }

#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

<script>
  $(function(){
    $("#sortable").sortable().disableSelection();
    $("#sortable").mouseleave(function(){ console.log("mouseleave"); });
  });   
</script>

<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

обновление Я использовал следующее, Чтобы определить, когда ребенок был полностью вытащен за пределы сортируемого:

$("#sortable li").mousemove(function() {
        if ($(this).offset().left > $(this).parent().outerWidth() + $(this).parent().offset().left ||
                $(this).offset().top > $(this).parent().outerHeight() + $(this).parent().offset().top  ||
                $(this).offset().left + $(this).outerWidth() < $(this).parent().offset().left  ||
                $(this).offset().top + $(this).outerHeight() < $(this).parent().offset().top ){
                console.log("child is outside parent");
            }
    });
7
javascript jquery jquery-ui-sortable mouseleave

1 ответов

Я собираюсь сделать предположение и сказать, что вы пытаетесь запечатлеть событие, когда элемент визуально покидает зону сортировки. Как вы узнали, mouseleave и mouseout-не лучшие способы сделать это, потому что они отслеживают движение мыши относительно элементов DOM. Поскольку вы перетаскиваете эти элементы списка, они никогда не покидают неупорядоченный список, поэтому вы не получаете ожидаемых результатов.

это, однако, должно работать для вас:

$("#sortable").sortable().disableSelection();
$("#sortable li").mousemove(function() {
    if (parseInt($(this).css("left")) > $("#sortable").width() ||
        parseInt($(this).css("top")) > $("#sortable").height()) {
        //This is when the element is out of bounds
    }
});
4