1

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

然而，当我拖动项目时，我希望能够在树中的其他文件和文件夹上触发鼠标事件（在我的情况下mouseenter和mouseleave.这里的问题是光标下的元素是被拖动的元素，意味着不会触发其他鼠标事件。

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

4

1 回答 1

2

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

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

这是一个 JSBin 演示。

（基本）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;
}

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

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

于 2013-04-25T20:35:02.923 回答