jQuery mouseleave не срабатывает правильно при перетаскивании - PullRequest
Новая
       28

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

7 голосов
/ 22 июля 2011

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

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

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

Есть идеи?

Спасибо.

обновление: это также происходит для событий мыши.

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

1 Ответ

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

Я собираюсь сделать предположение и сказать, что вы пытаетесь зафиксировать событие, когда элемент визуально покидает сортируемую область.Как вы узнали, 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
    }
});
...