在拖动另一个元素时在光标下的元素上触发鼠标事件

Question

我有一个文件树，其中包含可拖动的文件夹和文件，使用自定义代码（使用 Backbone，这是不相关的）。当我拖动一个项目时，我将一个拖动元素“附加”到鼠标光标以显示该项目已被拾取。

虽然我正在拖动项目，但是，我希望能够在树中的其他文件和文件夹上触发鼠标事件（在我的情况下为 mouseenter 和 mouseleave。这里的问题是元素光标下方是被拖动的，表示没有触发其他鼠标事件。

如何“看穿”我用光标拖动的元素，以便在 DOM 的其余部分仍然触发鼠标事件？

Answer 1

一个非常巧妙的解决方案是在 CSS 中使用伪元素。其他解决方案建议保留元素尺寸的缓存并进行坐标匹配，但这很混乱且容易出错；如果元素移动怎么办？它也相当慢。

我的解决方案是为每个要触发鼠标事件的元素（同时拖动另一个元素）提供一个带有元素尺寸的:after 属性。

Here is a JSBin demonstration.

（基本）CSS

.dragging {
    position: fixed;
    z-index: 1;
}

.drop-target {
    position: relative;
}

.drop-target:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

巧妙的一点是将:after 的z-index 设置为比光标拖动的元素高一个。这意味着鼠标事件将在底层元素上触发，因为鼠标在技术上悬停在（透明）伪元素上在被拖动元素的顶部。

然后，被拖动的元素将位于 :after 下方但位于实际元素上方，这意味着显示和行为都保持正确。