Question

我正在使用html5 drag and drop api创建日历。

我使用dragEnter和dragLeave来设置接收元素的样式并确定droppablity。

接收droppable元素有子节点，并且在子元素上拖动时会调用dragLeave。这个问题已经知道并描述为here.

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

问题是在父项'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 draggable / droppable吗？

编辑

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

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

您可以运行here

诀窍是取消内部元素的dragleaves传播，并注意当拖动输入在父级上发射并且目标不是父级时，我们即将得到一个我们不感兴趣的拖拽假。理想的，但它可以被考虑到你可以使用的东西。

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

嵌套的Ember.View dragEnter dragLeave以错误的顺序调用？

2 个答案: