1

我正在使用 html5拖放 api创建日历。

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

接收可放置元素具有子元素，并且dragLeave在拖动子元素时被调用。这个问题是已知的并在此处进行了描述。

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

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

问题是子级上的 `dragEnter' 在父级上的 'dragLeave' 之前被调用。

这是事件的顺序。

#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

4

2 回答 2

3

希望这可以帮助你，虽然它不是 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();
});

你可以在这里运行它

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

于 2014-01-07T15:51:36.383 回答
1

我认为 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();
});
于 2018-04-29T00:34:06.003 回答