嵌套的 Ember.View 拖动输入拖动离开调用顺序错误

Question

我正在使用html5拖放API创建一个日历。

我正在使用dragEnter和dragLeave来设置接收元素的样式并确定可丢弃性。

接收可放置元素具有子元素，并且在拖动子元素时正在调用dragLeave。此处已知并描述了此问题。

我尝试的解决方案是在子项上添加dragLeave和dragEnter事件，并将逻辑传递回父视图。

这是代码。http://jsbin.com/iHaNuPo/17

问题是在父级上的"dragLeave"之前调用子项上的"dragEnter"。

这是事件的顺序。

#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

这是一个错误吗？

有谁知道一种 Ember'ish 方法来防止父母在悬停在孩子身上时触发dragLeave事件？

或者一种固定事件dragLeave、dragEnter触发顺序的方法？

我应该放弃 html5 原生拖放并使用 jquery UI 可拖动/可拖放吗？

编辑

根据伍迪的回答，这是一个工作示例。

http://jsbin.com/OjAGabUj/22

Answer 1

希望这可以帮助您，尽管它不是 Ember，也许您可以利用它。 我对HTML5拖放有相当多的经验，这有点令人讨厌，但是如果您想要像跨窗口拖放这样很酷的东西，我认为这是值得的。

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

你可以在这里运行它

诀窍是从内部元素取消拖动叶的传播，并注意当拖动输入在父元素上触发并且目标不是父元素时，我们将得到一个我们不感兴趣的拖动离开。 不理想，但可以将其纳入您希望使用的东西中。

Answer 2

我认为 Woody 的解决方案是正确的，但如果你想保存几行代码并避免直接摆弄子元素，你也可以使用引用计数解决方案：

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