Ember anidado. View Dragenter Dragleave llamó en orden incorrecto?

Question

Estoy creando un calendario usando el HTML5 arrastrar y soltar API.

estoy usando dragEnter y dragLeave para peinar el elemento receptor y determinar la capacidad de retroceso.

El elemento droppable receptor tiene hijos y dragLeave se llama cuando se arrastra sobre un elemento infantil. Este problema es conocido y descrito aquí.

Mi intento de solución fue agregar dragLeave y dragEnter Eventos en los niños y vuelva a pasar la lógica a ParentView.

Aquí está el código. http://jsbin.com/ihanupo/17

El problema es 'dragenter' en el niño se llama antes 'dragleeave' en el padre.

Este es el orden de los eventos.

#in from outside parent to over child
1. parent-enter 
2. child-enter 
3. parent-leave
#out from over child to outside parent
1. parent-enter
2. child-leave
3. parent-leave

¿Es esto un error?

Cualquiera sabe una forma emperadora de evitar el dragLeave ¿Evento de los padres de disparar al pasar el cierre de un niño?

O una forma de arreglar el orden en el que los eventos dragLeave, dragEnter ¿fuego?

¿Debo deshacerme de la arrastre y soltar de HTML5 HTML5 y usar jQuery UI Draggable/Dropable?

EDITAR

Aquí hay un ejemplo de trabajo según la respuesta de Woody.

http://jsbin.com/ojagabuj/22

Answer 1

Esperemos que esto pueda ayudarlo, aunque no sea Ember, tal vez pueda usarlo. He tenido una buena experiencia de HTML5 arrastrar y soltar y es un poco molesto, pero si quieres cosas geniales como la arrastre y la caída de la ventana cruzada, vale la pena el esfuerzo, creo.

var ignoreNextLeave = false;

$("#outerDragTarget").on("dragenter", function(ev) {
   // not interested in dragleaves from my children...
   if (ev.target !== this) {
      ignoreNextLeave = true;
   }

   $(this).addClass("dragover");

}).on("dragleave", function(ev) {

   if (ignoreNextLeave) {
      ignoreNextLeave = false;
      return;
   }

   $(this).removeClass("dragover");
});

$("#innerDragTarget").on("dragleave", function(ev) {
  ev.stopPropagation();
});

Puedes ejecutarlo aquí

El truco es cancelar la propagación de dragleaves desde el elemento interno y observar que cuando Drag Enter Fires en el padre y el objetivo no es el padre, estamos a punto de obtener una licencia de lo que no estamos interesados. No es ideal pero es ideal. podría tener en cuenta algo que con suerte puede usar.

Answer 2

Creo que la solución de Woody es correcta, pero si desea guardar algunas líneas de código y evitar tener que jugar directamente con los elementos infantiles, también podría usar una solución de conteo de referencia:

$(".drop-target").on("dragenter dragleave", function (e)
{
  var dragHoverCount = Number($(this).data("dragHoverCount")) || 0;
  (e.type === "dragenter") ? dragHoverCount++ : dragHoverCount--;
  $(this).data("dragHoverCount", dragHoverCount);

  $(this).toggleClass("drag-hover", dragHoverCount > 0);

  e.preventDefault();
});