js原生拖拽效果

<div class="list">
        <div class="list-item" draggable="true" style="--color:#e63e31">
            <span class="list-item-title">双鱼座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#70d265">
            <span class="list-item-title">水平座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#f0e941">
            <span class="list-item-title">摩羯座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#da8218">
            <span class="list-item-title">处女座</span>
        </div>
        <div class="list-item" draggable="true" style="--color:#7ff0ec">
            <span class="list-item-title">狮子座</span>
        </div>
    </div>

body {
            background-color: #000;
        }

        .list {
            width: 300px;
            height: 360px;
            /* padding: 20px 0; */
            margin: 100px auto 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .list-item {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0 16px;
            border-radius: 10px;
            /* margin-bottom: 20px; */
            background-color: var(--color);
            /* color: var(--color); */
        }

        .constellation {
            line-height: 2.5em;
            font-size: 20px;
            color: #fff;
        }

        .list-item-img {
            width: 30px;
            height: 30px;
        }

        .list-item-title {
            margin-left: 20px;
            /* color: #fff; */
        }

        /*  移动动画class */
        .list-item.moving {
            background-color: transparent;
            border: 2px dashed #ccc;
        }

// 获取整个list
        const list = document.querySelector('.list')
        // 获取每一个盒子
        const item = document.querySelectorAll('.list-item')
        // 开始拖动
        list.ondragstart = e => {
            source_node = e.target
            recode(item)
            setTimeout(() => {
                // 拖拽时样式
                e.target.classList.add('moving')
            }, 0)
            // 设置拖动效果
            e.dataTransfer.effectAllowed = 'move'
        }
        // 拖拽放入有效目标触发
        list.ondragenter = e => {
            e.preventDefault()
            console.log(e.target.id, list)
            if (e.target === list || e.target === source_node) {
                return false
            }
            const childer = Array.from(list.children)
            const sourceIndex = childer.indexOf(source_node)
            const targetIndex = childer.indexOf(e.target)
            // console.log(sourceIndex, targetIndex)
            if (sourceIndex < targetIndex) {
                // 从下往上拖动
                list.insertBefore(source_node, e.target.nextElementSibling)
            } else {
                // 从上往下拖动
                list.insertBefore(source_node, e.target)
            }
            // 动画效果函数
            last([e.target, source_node])
        }
        // 拖放结束
        list.ondragend = e => {
            e.target.classList.remove('moving')
        }


        // ondragstart: 当用户开始拖动一个元素或文本选择时，会触发dragstart事件
        // ondragover: 当元素或文本选择被拖到有效的拖放目标上时(每几百毫秒一次)，就会触发拖放事件
        // ondragenter: 当被拖动的元素或文本选择进入有效的拖放目标时，会触发dragenter事件
        // ondragend: 当拖放操作结束时(通过释放鼠标按钮或点击escape键)触发dragend事件。
        // e.dataTransfer.effectAllowed: 用于设置拖放时的效果，常用参数有（move, link, copy）
        // getBoundingClientRect: 返回元素对于视口的信息
        // requestAnimationFrame: 重绘动画
        // cancelAnimationFrame：用于取消requestAnimationFrame调用请求