拖拽带边框可拖拽元素后边框残留问题求助

问题：一组可拖拽元素列表，鼠标悬停时元素显示红色虚线边框。拖拽某一元素移走后，原位置接替的元素周围会残留该边框，需要在拖拽操作完成后隐藏此边框。

解决思路 #

拖拽完成后浏览器未自动触发接替元素的mouseleave事件，导致CSS原生:hover伪类样式残留。改用自定义类控制hover效果，通过JS主动管理样式的添加与移除，彻底解决残留问题。

修改后的代码 #

JavaScript #

function listItemDragged(e) {
    e.target.classList.add('dragging');
    // 拖拽过程中移除所有元素的hover类
    document.querySelectorAll('.draggable').forEach(item => {
        item.classList.remove('hover');
    });
    let dropTarget =
        document.elementFromPoint(e.clientX, e.clientY) === null
            ? e.target
            : document.elementFromPoint(e.clientX, e.clientY);

    if (e.target.parentNode === dropTarget.parentNode) {
        dropTarget =
            dropTarget !== e.target.nextSibling
                ? dropTarget
                : dropTarget.nextSibling;
        e.target.parentNode.insertBefore(e.target, dropTarget);
    }
}

function listItemDropped(e) {
    e.target.classList.remove('dragging');
    // 拖拽结束后清除所有元素的hover类
    document.querySelectorAll('.draggable').forEach(item => {
        item.classList.remove('hover');
    });
}

function handleMouseEnter(e) {
    // 非拖拽状态的元素才添加hover样式
    if (!e.target.classList.contains('dragging')) {
        e.target.classList.add('hover');
    }
}

function handleMouseLeave(e) {
    e.target.classList.remove('hover');
}

function onLoad() {
    let listItems = document.querySelectorAll('.draggable');
    Array.prototype.map.call(listItems, (option) => {
        option.ondrag = listItemDragged;
        option.ondragend = listItemDropped;
        option.onmouseenter = handleMouseEnter;
        option.onmouseleave = handleMouseLeave;
    });
}
onLoad();

CSS #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif
}

body {
    background-color: #2b3035;
}

.draggable {
    display: flex;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 5px;
    border: 1px solid #5c636a;
    margin-right: 5px;
    background-color: #212529;
    cursor: grab;
    color: #ffffff;
    touch-action: none
}

/* 自定义hover类替代原生:hover伪类 */
.draggable.hover {
    border: 1px dashed #ff0000;
}

.dragging {
    cursor: grabbing;
    background: transparent;
    color: transparent;
    border: none !important;
}

HTML #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ul class='sortable-list list-unstyled'>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 1
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 2
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 3
</li>
<li class='draggable' draggable='true'>
    Lorem ipsum dolor sit amet 4
</li>
</ul>

关键改动说明 #

1. 替换CSS原生:hover为自定义.hover类，通过JS的鼠标事件手动控制样式，避免浏览器自动状态失效的问题。
2. 拖拽过程和结束阶段主动清除所有元素的.hover类，确保接替元素不会残留边框样式。
3. 给mouseenter事件增加判断，拖拽中的元素不会触发hover样式，优化拖拽时的视觉体验。

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