js实现拖拽功能（拖拽排序）

<template>
    <transition-group class="container" name="sort">
        <div class="drag-item" v-for="(v,i) in dragArray" :key="i" :draggable="true"
            @dragstart="dragstart(v)"
            @dragenter="dragenter(v,$event)"
            @dragend="getDragend(dragArray, 'customer', $event)">
            <div>
                <img class="image" :src="v">
            </div>
        </div>
    </transition-group>
</template>

<script>
export default {
    data() {
        return {
            dragArray: [
                'https://hbimg.huabanimg.com/ba2874cacd3b57fec50445a609982bc8f8b32d0777957-eB2cZr_fw658',
                'https://hbimg.huabanimg.com/26d967376e87f473b7c224e52c528001f05275624019b-TAm4Qy_fw658',
                'https://hbimg.b0.upaiyun.com/b16df6e238d634cd53c1c65a0ab510e8f1206c36a2a0-dnnXHp_fw658',
                'https://hbimg.b0.upaiyun.com/af840fb96ecc26badbd26943a17787a0b4befb32d2be-3V6a92_fw658'
            ],
            oldData: [],
            newData: []
        };
    },
    methods: {
        /** 拖拽开始 */
        dragstart(value) {
            this.oldData = value;
        },
        /** 拖拽进行 */
        dragenter(value) {
            this.newData = value;
        },
        /** 拖拽结束 */
        getDragend(listData) {
            if (this.oldData !== this.newData) {
                let oldIndex = listData.indexOf(this.oldData)
                let newIndex = listData.indexOf(this.newData)
                let newItems = [...listData];
                // 删除之前DOM节点
                newItems.splice(oldIndex, 1);
                // 在拖拽结束目标位置增加新的DOM节点
                newItems.splice(newIndex, 0, this.oldData);
                // 每次拖拽结束后，将拖拽处理完成的数据，赋值原数组，使DOM视图更新，页面显示拖拽动画
                this.dragArray = newItems;
                // 每次拖拽结束后调用接口时时保存数据
                // saveApi(this.dragArray).then((res) => {})
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.sort-move {
    transition: transform 1s;
}
.image {
    width: 70px;
    height: 70px;
    border-radius: 12px;
}
</style>