[JavaScript知识库]vue3图片拖拽排序

实现以下效果，两种排序方式：插入和互换，每次排序会返回排序后的数据

子组件代码如下:

<template>
    <transition-group class="drag-sort-box" name="sort" tag="div" @dragover="dragover($event)">
        <div
            :class="[itemClass, 'drag-sort-item']"
            v-for="(item,index) in images"
            :key="item"
            :draggable="true"
            @dragstart="dragstart(item, index)"
            @dragenter="dragenter(item, $event)"
            @dragend="dragend(item, $event)"
            @dragover="dragover($event)"
        >
            <p class="moxsind">{{ index + 1 }}</p>
            <img :src="item" :class="index == dargIndex ? 'active' : ''" />
        </div>
    </transition-group>
</template>

<script>
import { ref } from 'vue';
export default {
    name: 'DragSort',
    props: {
        imageList: Array, // 传入图片数据
        sortType: {  // 排序方式
            type: String,
            default: 'insert'
        },
        itemClass: String,//自定义类名
    },
    setup(prop, ctx) {
        let images = ref([...prop.imageList]);
        images.value = images.value.map((v, i) => v = v + '?index=' + i);//不重复key
        let dargIndex = ref(-1);

        let oldData = null; 
        let newData = null; 

        function dragstart(value, index) {
            oldData = value
            dargIndex.value = index
        }
        function dragenter(value, e) {
            newData = value
            e.preventDefault()
        }

        function dragover(e) {
            e.preventDefault()
        }

        function dragend() {
            if (oldData !== newData) {
                let oldIndex = images.value.indexOf(oldData);
                let newIndex = images.value.indexOf(newData);

                if (prop.sortType == 'insert') {
                    let newItems = [...images.value]
                    newItems.splice(oldIndex, 1)
                    newItems.splice(newIndex, 0, oldData)
                    images.value = [...newItems]
                } else {
                    [images.value[oldIndex], images.value[newIndex]] = [images.value[newIndex], images.value[oldIndex]];
                }

                ctx.emit('change', images.value)
            }
            dargIndex.value = -1
        }

        return {
            images,
            dargIndex,

            dragover,
            dragstart,
            dragenter,
            dragend
        }
    }
}
</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
}
.drag-sort-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.drag-sort-box .drag-sort-item {
    width: 100px;
    height: 100px;
    margin: 2px;
    cursor: pointer;
    transition: all 0.3s;
    background: #ccc;
    position: relative;
}

.drag-sort-box .drag-sort-item img {
    width: 100%;
    height: 100%;
    transition: all 0.3s;
    position: relative;
}
.drag-sort-box .drag-sort-item .active {
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
}
.moxsind {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dfd6d6;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    font-size: 50px;
    font-weight: 600;
    position: absolute;
    top: 0;
    left: 0;
}
</style>

父组件代码：

<template>
    <div class="dropx">
        <DragSort
            :imageList="imageList"
            :sortType="'exchange'"
            :item-class="'citem'"
            @change="sortChange"
        />
    </div>

    <div class="dropx">
        <DragSort
            :imageList="imageList"
            :sortType="'insert'"
            :item-class="'bitem'"
            @change="sortChange"
        />
    </div>
</template>

<script>
import DragSort from './components/DragSort.vue'

export default {
    name: 'App',
    components: {
        DragSort
    },
    setup() {
        const imageList = [
            'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500',
            'https://img1.baidu.com/it/u=1407750889,3441968730&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=799',
            'https://img0.baidu.com/it/u=1721391133,702358773&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=625',
            'https://img1.baidu.com/it/u=3316754777,2519856621&fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500',
            'https://img1.baidu.com/it/u=3851364429,4209170710&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            'https://img1.baidu.com/it/u=3851364429,4209170710&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
        ]

        function sortChange(newArr) {
            console.log(newArr);
        }

        return {
            imageList,
            sortChange
        }
    }
}
</script>

<style scoped>
.dropx {
    width: 80vw;
    height: 200px;
    border: 1px dashed #999;
    margin: 50px auto;
}
</style>
<style>
.citem {
    border: 1px dashed red;
}
.bitem {
    border: 1px dashed green;
}
</style>