Question

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

虽然我正在拖动项目，但是，我希望能够在树中的其他文件和文件夹上触发鼠标事件（在我的情况下为mouseenter和mouseleave。此处的问题是光标下的元素是被拖动的元素，意味着不会触发其他鼠标事件。

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

Answer 1

一个非常简洁的解决方案是在一个CSS中使用伪元素。其他解决方案建议保持元素维度的缓存并进行坐标匹配，但这很麻烦且容易出错;如果元素移动怎么办？它也很慢。

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

（基本）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的{{1}}设置为更高，而不是光标所拖动的元素。这意味着鼠标事件将在底层元素上触发，因为鼠标在技术上悬停在被拖动元素顶部的（透明）伪元素上。

拖动的元素将在:after之下，但在实际元素之上，这意味着显示和行为都保持正确。

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

1 个答案:

（基本）CSS