Nidificato ember.view Dragenter Dragleave Chiamato in ordine sbagliato?

Question

Sto creando un calendario usando HTML5 Drag and Drop API.

sto usando dragEnter e dragLeave Per modellare l'elemento di ricezione e determinare la droppability.

L'elemento droppable ricevente ha figli e dragLeave viene chiamato quando si trascina su un elemento figlio. Questo problema è conosciuto e descritto qui.

La mia tentata soluzione era aggiungere dragLeave e dragEnter Eventi sui bambini e riportano la logica a ParentView.

Ecco il codice. http://jsbin.com/ihanupo/17

Il problema è "Dragenter" sul bambino viene chiamato prima di "Dragleave" sul genitore.

Questo è l'ordine degli eventi.

#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

è un insetto?

Qualcuno sa un modo ember'ish per prevenire il dragLeave Evento del genitore di sparare quando si libra su un bambino?

O un modo per correggere l'ordine in cui eventi dragLeave, dragEnter fuoco?

Dovrei abbandonare HTML5 trascinamento nativo e usarne e usare droppable/droppable JQuery?

MODIFICARE

Ecco un esempio funzionante secondo la risposta di Woody.

http://jsbin.com/ojagabuj/22

Answer 1

Spero che questo possa aiutarti anche se non è una brace, forse puoi farne uso. Ho avuto un bel po 'di esperienza di trascinamento di HTML5 ed è un po' fastidioso, ma se vuoi cose interessanti come il trascinamento della finestra incrociata, merita lo sforzo che penso.

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

Puoi eseguirlo qui

Il trucco è annullare la propagazione di dragleaves dall'elemento interno e notare che quando la trascinamento di entrata si accende sul genitore e il bersaglio non è il genitore, stiamo per ottenere un congedo di trascinamento non ci interessa. Non ideale ma esso Potrebbe essere preso in considerazione in qualcosa che si può sperare di usare.

Answer 2

Penso che la soluzione di Woody sia corretta, ma se si desidera salvare alcune righe di codice ed evitare di dover giocherellare direttamente con gli elementi figlio, potresti anche usare una soluzione di conteggio di riferimento:

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