jQuery mouseceave no disparando correctamente mientras arrastra

Question

Tengo una lista ordenable con un detector de eventos mouseleave que se comporta de forma incorrecta.

Si muevo el mouse dentro y fuera de la lista ordenable, el mouseleave se dispara correctamente.

Si primero hago clic y arrastre uno de los elementos secundarios de la ordenación, mouseleave se dispara incorrectamente - esporádicamente o no se activa en absoluto.

¿Alguna idea?

Gracias.

actualización: Esto también ocurre con los eventos de 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> 

actualización He utilizado el siguiente para detectar cuando un niño ha sido arrastrado completamente fuera del 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

Voy a hacer una suposición y decir que son tratando de capturar el evento cuando el elemento abandona visualmente el área ordenable. Como descubriste, mouseleave y mouseout no son las mejores formas de hacerlo porque rastrean el movimiento del mouse relativo a los elementos DOM. Como está arrastrando estos elementos de lista, en realidad nunca abandonan la lista desordenada para que no obtenga los resultados que espera.

Sin embargo, esto debería funcionar para usted:

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