jQuery mouseleave not firing correctly while dragging

Question

I have a sortable list with a mouseleave event listener that is behaving incorrectly.

If I move the mouse in and out of the sortable list, mouseleave fires correctly.

If I first click and drag one of the sortable's children, mouseleave fires incorrectly - sporadically or not at all.

Any ideas?

Thanks.

update: This occurs for mouseout events as well.

<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>

update I have used the following to detect when a child has been dragged fully outside of the sortable:

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

Answer 1

I'm going to make an assumption and say that you are trying to capture the event when the element visually leaves the sortable area. As you found out, mouseleave and mouseout are not the best ways to do that because they track mouse movement relative to the DOM elements. Since you are dragging these list items they never actually leave the unordered list so you aren't getting the results you expect.

This however should work for you:

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