使用 HTML5 可以使元素“不可见”。用于拖/放交互？

发布于 2025-01-15 23:29:46 字数 1244 浏览 0 评论 0原文

仍在尝试将拖放和移动元素与鼠标结合起来当我'时，我正在努力解决 dragenter 和 dragleave 父元素不被调用的问题米移动子元素。这看起来很自然，因为该元素始终悬停在父元素上并防止为父元素调用 dragenter 。

我尝试在 dragenter、dragleave、dragover 中调用 stopPropagation() 和 preventDefault()子元素的 code>、dragstart 和 drag 事件，但没有实际效果。

另一个问题似乎解决类似的问题，但如果我正确理解的话，没有真正的解决方案。

也许兔子洞里太黑了，看不到明显的东西 - 如何防止拖动的项目避免调用其父级 dragenter/dragleave 事件？

在另一个层面上，我只想知道该元素是否已被删除到父元素之外（然后将其返回到原始位置）。有更简单的方法吗？

这是我当前的代码 - 在当前状态下，元素正在用鼠标移动，从而防止dragenter 或 dragleave 被调用。

停用 draggable_element 的实际移动将使 dragenter 和 dragleave 在离开父/目标区域时以及在输入拖动的元素时被调用（我以某种方式无法避免）。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独享拥抱 2025-01-22 23:29:46

找到了它 - 而不是摆弄拖/放事件，您只需为拖动的项目停用pointer-events，以避免不需要的dragenter/dragleave父级的事件，然后再次将其重新打开（默认情况下必须激活它才能首先启用拖动）。

draggable_element.addEventListener("dragstart", (e) => {
  e.srcElement.style.pointerEvents = "none";
  ... // rest of code
});

elem.addEventListener("dragend", (e) => {
  e.srcElement.style.pointerEvents = "auto";
  ... // rest of code
});

这是一个工作示例： https://jsfiddle.net/03a9s4ur/10/

Found it - instead fiddling with the drag/drop events you just have to deactivate pointer-events for the dragged item to avoid unwanted dragenter/dragleave events for the parent and turn it back on again afterwards (it has to be activated by default to enable dragging in the first place).

draggable_element.addEventListener("dragstart", (e) => {
  e.srcElement.style.pointerEvents = "none";
  ... // rest of code
});

elem.addEventListener("dragend", (e) => {
  e.srcElement.style.pointerEvents = "auto";
  ... // rest of code
});

Here is a working example: https://jsfiddle.net/03a9s4ur/10/

回复收藏 0 原文

~没有更多了~