拖拽排序组件

<template>
    <transition-group tag="div" class="container">
        <div class="item" v-for="(item) in imagelist" :key="item.key" :style="{ width: '80px', height: '80px' }"
            draggable="true" @dragstart="handleDragStart(item)" @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)" @dragend="handleDragEnd">
            <img :src="item.imgerurl" alt="">
        </div>
    </transition-group>
</template>
 
<script lang="ts">
export default {
    name: 'DropSort',
    props: {
        value: {
            type: Array,
            default: () => [
                { key: 1, imgerurl: 'images/img1.jpg' },
                { key: 2, imgerurl: 'images/img2.jpg' },
                { key: 3, imgerurl: 'images/img3.jpg' },
                { key: 4, imgerurl: 'images/img4.jpg' },
                { key: 5, imgerurl: 'images/img5.jpg' }
            ],
        },
    },
    data() {
        return {
            dragging: null,
            imagelist: [],
        };
    },
    methods: {
        handleDragStart(item) {
            this.dragging = item;
            this.$emit('first',item);
        },
        handleDragEnd() {
            this.dragging = null;
        },
        handleDragOver(e, item) {
            e.dataTransfer.dropEffect = 'move';
        },
        handleDragEnter(e, item) {
            e.dataTransfer.effectAllowed = "move";
            if (item === this.dragging) {
                return;
            }
            const newItems = [...this.imagelist];
            const src = newItems.indexOf(this.dragging);
            const dst = newItems.indexOf(item);
            // 替换
            newItems.splice(dst, 0, ...newItems.splice(src, 1));
            // 让item的颜色等于新交换的颜色
            this.$emit('input', newItems);
            this.imagelist = newItems;
        }
    },
    created() {
        this.imagelist = this.value;
    },
};
</script>
  
<style scoped>
.container {
    position: relative;
    left: 0;
    display: flex;
    justify-content: space-around;
    padding: 0;
}

.item {
    width: 300px;
    height: 300px;
    display: flex;
    margin-top: 10px;
    transition: all linear .3s
}
</style>