jQuery UI droppable - tolerancia/codicioso no funciona como se esperaba

Question

Cuando arrastro el archivo arrastrable, el elemento que contiene los elementos desplegables sigue activándose (porque también es un elemento que se puede quitar), aunque está detrás de los elementos que se pueden colocar y están apilados en cada otro. Se está comportando como si hubiera un espacio entre los elementos que se pueden colgar, y no hay ninguno.

He hecho an example on jsFiddle y aquí está the screenshot of the offending behavior.

Si añado relleno para .parent (por ejemplo padding: 0.2em 0.2em 0em 0.2em el comportamiento es aún peor.

Answer 1

En primer lugar, espero que pueda encontrar una solución en estos meses, estoy respondiendo a esto porque estoy trabajando con jQueryUI en este período y pensé que sería un buen ejercicio para tratar de encontrar una respuesta. Además, odio las preguntas sin respuesta^_^

Desafortunadamente, realmente parece que el navegador reacciona como si entre esos elementos .child hay un poco de espacio, suficiente para desencadenar los eventos *over para el .parent. La única idea que se me ocurrió es tratar de detectar si, cuando el dropover eventos desencadenantes en el elemento primario, la posición del mouse está realmente dentro de un elemento secundario. Si es así, debe dar la clase accepting_drops al elemento secundario en lugar de al padre.

Aquí está el código (hice un jsFiddle para mostrar mi solución en acción):

HTML y CSS no están alterados, por lo que no voy a copiar de nuevo

Javascript

$('.dragme').draggable({ 
    helper: 'clone' 
}); 

$('.parent,.child').droppable({ 
    greedy: true, 
    tolerance: 'pointer', 
}); 

$(".parent").on("dropover", function(event, ui) { 
    var first = $(".child:first"); 
    var last = $(".child:last"); 

    if((event.originalEvent.pageX > first.offset().left) && 
     (event.originalEvent.pageY > first.offset().top) && 
     (event.originalEvent.pageX <= (last.offset().left + last.width())) && 
     (event.originalEvent.pageY <= (last.offset().top + last.height()))) { 
     $(this).removeClass("accepting_drops"); 
    } 
    else { 
     $(this).addClass("accepting_drops"); 
     $(".child").removeClass("accepting_drops"); 
    } 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

$(".child").on("dropover", function() { 
    $(".parent").removeClass("accepting_drops"); 
    $(".child").removeClass("accepting_drops"); 
    $(this).addClass("accepting_drops"); 
}).on("dropout", function() { 
    $(this).removeClass("accepting_drops"); 
}); 

Eliminé la línea hoverClass: 'accepting_drops' porque anulamos el comportamiento predeterminado del componente que se puede arrastrar. Para el div principal, si cuando se desencadena un evento dropover también estoy dentro de un elemento secundario, elimino la clase accepting_drops de él; de lo contrario, lo elimino de cualquier elemento secundario que pudiera tenerlo y lo agregue al elemento primario. Cuando se desencadena un evento dropout, elimino la clase accepting_drops.

Para el niño, el comportamiento es casi estándar, en un evento dropover elimino la clase accepting_drops de todo lo demás y añadirlo al niño, en un evento dropout lo quito.

El comportamiento es aún un misterio, pero esta solución alternativa debería ser la solución.