Chrome拖放触发：在周围元素上悬停伪类答案

【问题标题】：Chrome Drag & Drop triggering :hover pseudo-class on surrounding elementsChrome拖放触发：在周围元素上悬停伪类
【发布时间】：2014-10-23 18:11:41
【问题描述】：

我在 Chrome 中遇到了非常令人沮丧和意外的拖放行为。

问题：

:hover 伪类被触发并卡在周围的元素上，尤其是 DragElement 的幽灵与其重叠的元素。

重现问题的步骤：

示例： http://plnkr.co/edit/PayXodHUtxqUZsM3T2ye 然后在单独的窗口中预览
单击并拖动任意数字框。
将它放在任何其他盒子中，其幻影与周围元素略微重叠。

这发生在 Chrome 35、36 和 38-beta 中。我还注意到这个没有发生在带有编辑器的 Plunker 的 Run 框架中，而是发生在完整的窗口视图中（上面链接）。它也发生在我的 node-webkit 应用程序中（我发现了这个问题）。

到目前为止我尝试过的：

在.box 上使用-webkit-user-drag: element;
在每个 .box 元素上添加 draggable="true" 属性以查看是否存在差异。
event.stopPropagation 用于各种元素，包括 window

为什么会在周围元素上触发:hover？这完全没有意义。我要拔头发了！：/

提前感谢愿意帮助我解决此问题的任何人。

【问题讨论】：

我已经向 Chromium 问题委员会报告了这个问题，所以我确信他们正在调查这个问题：code.google.com/p/chromium/issues/detail?id=410328
我要把头发扯掉！哈，我在调试时也有同样的感觉。
2 年后仍然是一个问题！

标签： css google-chrome drag-and-drop hover draggable

【解决方案1】：

你考虑过 jQuery UI 吗？我知道外部资源越少越好，但是 jQuery UI 会检测到您何时拖动，然后（如“The Reveller”所说），您可以向 body 添加一个类并指定

.bodyIsDragging{
   pointer-events: none
 }

【讨论】：

【解决方案2】：

你可以在拖动的时候给你的 html/body 标签添加一个类吗？如果是这样，您可能会使用

.is-dragging * {
  pointer-events: none;
}

.is-dragging 是你的 body/html 上的类然后覆盖您当前正在拖动的元素。

【讨论】：

【解决方案3】：

这对我有用（以一种丑陋的方式）：

CSS：

.is-dragging {
    pointer-events: none;
}

JS：（关于“drop”事件）

$('body').addClass('is-dragging');

if (event.clientY < separatorY)
    dragged.insertBefore(target);
else
    dragged.insertAfter(target);

setTimeout(function()
{
    $('body').removeClass('is-dragging');
}, 1);

【讨论】：