vue3拖拽排序vuedraggable

安装

npm i vuedraggable@4.1.0 --save
npm install sortablejs --save

使用

import vuedraggable from "vuedraggable"

let drag = ref(false)
let image = reactive({
    list: ['1', '2', '3']
})

<vuedraggable
    class=""
    v-model="image.list"
    @start="drag = true"
    @end="drag = false"
    item-key="index"
>
    <template #item="{ element, index }">
        <div class="image-box">{{element}}</div>
    </template>
</vuedraggable>

拖拽排序

来源：www.cnblogs.com/banyuege/p/…

<template>
    <div class="main">
        <div
            class="item"
            v-for="item in dataList"
            :key="item"
            draggable="true"
            @drop="drop(item)"
            @dragleave="dragleave($event, item)"
            @dragstart="dragstart(item)"
            @dragenter="dragenter($event, item)"
            @dragend="dragend(item)"
        >
            {{ item }}
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
const dataList = ref<string[]>(["1", "2", "3", "4", "5"])
const clickVal = ref<string>()
const moveVal = ref<string>()
const endVal = ref<string>()

// 元素正在拖动时
const dragging = (item: string): void => {
    console.log("dragging", item)
    // clickVal.value = item
}
//
const drop = (item: string): void => {
    console.log("drop", item)
    // clickVal.value = item
}
// 开始拖动元素时
const dragstart = (item: string): void => {
    console.log("start", item)
    clickVal.value = item
}
// 当被鼠标拖动的对象进入其容器范围内时
const dragenter = (e: any, item: string): void => {
    console.log("enter", item, e.target, e.target.classList)
    e.target.classList.add("active")
    moveVal.value = item
}
// 当被鼠标拖动的对象离开其容器范围内时
const dragleave = (e, item: string): void => {
    console.log("leave", item, e.target)
    e.target.classList.remove("active")
}
// 完成元素拖动后
const dragend = (item: string): void => {
    console.log("end", item)
    endVal.value = item
    let index = dataList.value.indexOf(item) //移动元素的当前位置
    let moveObj = moveVal.value ? moveVal.value : ""
    let addIndex = dataList.value.indexOf(moveObj) //要移动后的位置
    dataList.value.splice(index, 1)
    dataList.value.splice(addIndex, 0, item)
}
</script>
<style lang="less" scoped>
.main {
    display: flex;
    .item {
        cursor: pointer;
        margin-bottom: 10px;
        width: 100px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        color: #000;
        margin-left: 20px;
        border: dashed 3px #ccc;
        &.active {
            border: dashed 3px red;
        }
    }
}
</style>