Verschachtelte Ember.View Dragenter Dragleave in falscher Reihenfolge angerufen?

Question

Ich erstelle einen Kalender mit dem HTML5 API ziehen und fallen lassen.

ich benutze dragEnter und dragLeave Um das Empfangselement zu stylen und die Abfälle zu bestimmen.

Das empfangende Kofferelement hat Kinder und dragLeave wird aufgerufen, wenn er über ein untergeordnetes Element schleppt. Dieses Problem ist bekannt und beschrieben hier.

Meine versuchte Lösung war hinzuzufügen dragLeave und dragEnter Ereignisse an den Kindern und übergeben die Logik an die ParentView zurück.

Hier ist der Code. http://jsbin.com/ihanupo/17

Das Problem ist, dass "Dragenter" auf dem Kind vor "Dragleave" auf dem Elternteil gerufen wird.

Dies ist die Reihenfolge der Ereignisse.

#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

Ist das ein Fehler?

Jeder kennt einen ember'ish -Weg, um das zu verhindern dragLeave Ereignis des Elternteils vom Schießen beim Schweben über ein Kind?

Oder eine Möglichkeit, die Reihenfolge zu beheben, in denen Ereignisse dragLeave, dragEnter Feuer?

Sollte ich HTML5 native Drag & Drop -HTML5 -HTML5 -DRAGE/DRAPSABLE verwenden?

BEARBEITEN

Hier ist ein funktionierendes Beispiel gemäß Woodys Antwort.

http://jsbin.com/ojagabuj/22

Answer 1

Hoffentlich kann dies Ihnen helfen, obwohl es nicht Ember ist, vielleicht können Sie es nutzen. Ich habe ein bisschen Erfahrung mit HTML5 Drag and Drop gemacht und es ist ein bisschen ärgerlich, aber wenn Sie coole Sachen wie Cross Window Drag and Drop wollen, ist es die Mühe wert, die ich denke.

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

Sie können es ausführen hier

Der Trick besteht darin, die Ausbreitung von Dragleaves aus dem inneren Element abzusagen und festzustellen Könnte in etwas berücksichtigt werden, das Sie hoffentlich verwenden können.

Answer 2

Ich denke, Woodys Lösung ist korrekt, aber wenn Sie ein paar Codezeilen sparen und vermeiden müssen, direkt mit untergeordneten Elementen zu fassen, können Sie auch eine Referenzzähllösung verwenden:

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