vue 列表拖动排序

/**
* 拖拽排序
*/
<script setup>
const draggingIndex = ref(null); // 大类拖拽index
const dragList = ref([]); // 列表
const onDragStart = (index) => {
    // 拖拽开始
    draggingIndex.value = index;
    // 添加 dragging
    document.querySelectorAll('.list-group-item').forEach((el, el_index) => el_index == index && el.classList.add('dragging'));
};

const onDragOver = (index,) => {
    // 拖拽结束
    if (draggingIndex.value !== index) {
        const draggedItem = dragList.value.splice(draggingIndex.value, 1)[0];
        dragList.value.splice(index, 0, draggedItem);
        draggingIndex.value = index;
    }
    // 移除所有dragging
    setTimeout(() => {
        document.querySelectorAll('.dragging').forEach(el => el.classList.remove('dragging'));
    }, 100)
};

const onDrop = () => {
    // 离开
    draggingIndex.value = null;
};

</script>

<template scoped>
    <div class="group-index-input list-group-item" v-for="(dragItem, drag_index) in dragList" :key="drag_index"
        draggable="true" @dragstart="() => onDragStart(drag_index)" @dragover.prevent="onDragOver(drag_index)"
        @drop="onDrop()">
        {{ dragItem.xxx }}
    </div>
</template>

<style scoped>
.list-group-item {
    padding: 5px 2px;
    border-left: unset;
    border-right: unset;
    transition: transform 0.2s, background-color 0.2s;
    cursor: grab;
}


.list-group-item.dragging {
    opacity: 0.5;
    background-color: #d1e7ff;
    transform: scale(1.05);
}
</style>