拖拽效果，搭配flip动画思想_flip 列表拖动动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_47863904/article/details/133701355

本文介绍了一个使用HTML和CSS实现的可拖动元素列表，通过JavaScript处理拖放事件，包括开始拖动、拖过、进入目标区域和结束拖动时元素的动态布局调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            width: 300px;
            height: 40px;
            background: linear-gradient(to right, #618264, #004225);
            border: 1px solid #618264;
            border-radius: 5px;
        }

        .moveing {
            background: transparent;
            color: transparent;
            border: 1px dashed #ccc;
        }
    </style>
</head>

<body>

    <div class="list">
        <div class="item" draggable="true">1</div>
        <div class="item" draggable="true">2</div>
        <div class="item" draggable="true">3</div>
        <div class="item" draggable="true">4</div>
        <div class="item" draggable="true">5</div>
    </div>

    <script>
        const list = document.querySelector('.list')
        const allItem = document.querySelectorAll('.list .item')

        let sourceDom
        list.ondragstart = e => {
            // 记录拖拽之前各元素的节点
            for (let i = 0; i < allItem.length; i++) {
                const dom = allItem[i]
                // 记录拖拽之前的纵坐标，（此拖拽位上下）
                dom.startY = dom.getBoundingClientRect().top
            }
            // 解决鼠标拖拽时有个+号的样式
            e.dataTransfer.effectAllowed = 'move'
            // 拖拽的目标元素
            sourceDom = e.target
            // 放入setTimeout目的是解决拖拽跟随鼠标的元素不第一时间设置moveing
            setTimeout(() => {
                e.target.classList.add('moveing')
            }, 0)
        }
        list.ondragover = e => {
            e.preventDefault()
        }
        list.ondragenter = e => {
            e.preventDefault()

            // 如果是拖拽到父元素或者自生不做处理
            if (e.target === list || e.target === sourceDom) {
                return
            }
            const children = [...list.children]
            // 找到拖拽元素的下标
            const sourceIndex = children.indexOf(sourceDom)
            // 找到目标元素的下标
            const targetIndex = children.indexOf(e.target)

            // 将元素插入
            if (sourceIndex < targetIndex) {
                list.insertBefore(sourceDom, e.target.nextElementSibling)
            } else {
                list.insertBefore(sourceDom, e.target)
            }

            for (let i = 0; i < allItem.length; i++) {
                const dom = allItem[i]
                //记录布局后的各元素位置，此时页面还没有画出
                const rect = dom.getBoundingClientRect()
                // 计算出每个元素高度发生了多少个像素变化
                const disY = dom.startY - rect.top
                dom.animate([
                    { transform: `translateY(${disY}px)` },
                     { transform: `translateY(0)` }
                ], { duration: 300 })

            }


        }
        list.ondragend = e => {
            e.preventDefault()
            e.target.classList.remove('moveing')
        }
    </script>

</body>

</html>```