如何判断拖放操作处于元素的:before还是:after伪元素区域？

这问题我之前做页面区块编辑器时也踩过坑！核心痛点是CSS伪元素（:before/:after）并不是真实的DOM节点——浏览器会渲染它们，但不会把它们加入DOM树，所以你用elementFromPoint只能拿到它们的宿主元素.section，自然没法直接区分是拖到了前还是后区域。

下面给你两种实用的解决思路：

方法一：通过鼠标位置的垂直偏移判断（无需修改DOM结构） #

既然伪元素的高度是固定的64px，我们可以通过计算鼠标在.section元素内的垂直位置，反推是落在了上方的:before区域还是下方的:after区域：

elem.on('drop', function(e) {
    e.preventDefault();
    const $section = $(this);
    // 获取元素在视口中的位置信息
    const sectionRect = $section[0].getBoundingClientRect();
    // 计算鼠标相对于元素顶部的垂直距离
    const mouseYRelative = e.clientY - sectionRect.top;
    const dropAreaHeight = 64; // 和CSS里定义的height保持一致
    const sectionTotalHeight = sectionRect.height;

    if (mouseYRelative <= dropAreaHeight) {
        // 鼠标落在了:before对应的上方区域 → 插入到当前区块前面
        console.log('插入到当前区块之前');
        // 示例：$section.before('<div class="section">新区块</div>');
    } else if (mouseYRelative >= sectionTotalHeight - dropAreaHeight) {
        // 鼠标落在了:after对应的下方区域 → 插入到当前区块后面
        console.log('插入到当前区块之后');
        // 示例：$section.after('<div class="section">新区块</div>');
    } else {
        // 鼠标落在了区块主体部分，可提示用户拖到上下区域
        console.log('请拖到区块的上下插入区域');
    }
});

这种方法的好处是不用改动现有DOM结构，完全通过坐标计算实现判断，适合已经固定了DOM结构的场景。

方法二：用真实DOM元素替换伪元素（交互更灵活） #

如果后续需要给拖放区域加hover效果、点击事件等交互，伪元素会很受限。这时候可以把:before/:after换成真实的DOM容器：

1. 修改HTML结构 #

<div class="section">
    <div class="drop-area drop-before">[insert here]</div>
    <!-- 原区块内容 -->
    <div class="drop-area drop-after">[insert here]</div>
</div>

2. 调整CSS样式 #

.drop-area {
    height: 64px;
    line-height: 56px;
    width: 100%;
    display: block;
    border: 3px dashed #aaa;
}

3. 修改拖放监听逻辑 #

现在elementFromPoint可以直接拿到对应的.drop-before或.drop-after元素，判断逻辑更直观：

elem.on('drop', function(e) {
    e.preventDefault();
    const target = $(elem[0].elementFromPoint(e.clientX, e.clientY));
    const $section = target.closest('.section');

    if (target.hasClass('drop-before')) {
        console.log('插入到当前区块之前');
        $section.before('<div class="section">新区块</div>');
    } else if (target.hasClass('drop-after')) {
        console.log('插入到当前区块之后');
        $section.after('<div class="section">新区块</div>');
    }
});

这种方法的优势是交互扩展性强，后续要给拖放区域加动画、禁用状态等都很方便。

内容的提问来源于stack exchange，提问作者JochenJung