使用flex-wrap时拖拽元素出现抖动的问题求解

问题原因 #

你的拖拽逻辑仅基于X轴坐标判断插入位置，但在flex-wrap: wrap的换行布局中，不同行的元素X轴范围可能重叠。拖拽时鼠标在Y轴跨越行边界时，会错误地与另一行的元素进行X轴偏移比较，导致元素在两行之间来回插入，出现抖动。

解决方案 #

修改拖拽位置判断逻辑，优先区分元素所在的行（Y轴），再在同一行内基于X轴判断插入位置，同时优化CSS避免元素宽度变化影响计算。

修改后的JavaScript代码

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener("dragstart", () =>{
        draggable.classList.add('dragging')
    })
    draggable.addEventListener("dragend", () =>{
        draggable.classList.remove('dragging')
    })
})

containers.forEach(container =>{
    container.addEventListener("dragover", e => {
        e.preventDefault()
        // 传入鼠标的X、Y坐标
        const afterElement = getDragAfterElement(container, e.clientX, e.clientY)
        const draggable = document.querySelector('.dragging')
        if (afterElement == null) {
            container.appendChild(draggable)
        }else{
            container.insertBefore(draggable, afterElement)
        }
    })
})

function getDragAfterElement(container, x, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
    const draggingRect = document.querySelector('.dragging').getBoundingClientRect()

    // 筛选与鼠标/拖拽元素同一行的元素
    const sameRowElements = draggableElements.filter(child => {
        const childRect = child.getBoundingClientRect()
        // 判断垂直范围是否重叠，确保属于同一行
        return (y >= childRect.top && y <= childRect.bottom) || 
               (draggingRect.top >= childRect.top && draggingRect.bottom <= childRect.bottom)
    })

    // 无同行元素时，优先按Y轴距离寻找最近元素
    if (sameRowElements.length === 0) {
        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect()
            const yOffset = Math.abs(y - (box.top + box.height / 2))
            const xOffset = x - (box.left + box.width / 2)
            if (yOffset < closest.yOffset || (yOffset === closest.yOffset && xOffset < 0 && xOffset > closest.xOffset)) {
                return { yOffset, xOffset, element: child }
            } else {
                return closest
            }
        }, { yOffset: Number.POSITIVE_INFINITY, xOffset: Number.NEGATIVE_INFINITY }).element
    }

    // 在同一行内，基于X轴判断插入位置
    return sameRowElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = x - (box.left + box.width / 2)
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child }
        } else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element
}

优化后的CSS代码

*{
    margin: 0px;
    padding: 0px;
}
.container{
    background-color: #333;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 300px;
}
.draggable{
    padding: 1rem;
    background-color: white;
    border: 1px solid black;
    cursor: move;
    width: fit-content;
    flex-shrink: 0; /* 禁止元素被压缩，保持宽度稳定 */
}
.draggable.dragging{
    opacity: .5;
}

关键修改说明 #

1. 行区分逻辑：通过判断鼠标垂直位置与元素的垂直范围重叠，筛选出同一行的元素，避免跨行列的错误比较。
2. Y轴优先判断：当无同行元素时，优先按Y轴距离寻找最近元素，确保换行时插入位置准确。
3. CSS优化：添加flex-shrink: 0防止元素被压缩，保证getBoundingClientRect()获取的位置数据稳定，减少计算误差。

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