vue3+ts利用draggable组件实现拖拽

界面展示

• 安装组件（vue3引入的包为vuedraggable@next ，vue2为vuedraggable）

npm i -S vuedraggable@next

• 引入并使用组件

<template>
    <!-- 此页面template中没有可刷新页面的数据变化，拖拽会不起作用，所以加个activeInfo来使界面刷新 -->
    {{ activeInfo }}
    <Draggable class="drag_box" v-model="myArray" group="people" @start="changeDrag(true)" @end="changeDrag(false)" item-key="id">
        <template #item="{ element }">
            <div class="drag_item">{{ element.id }} —— {{ element.name }}</div>
        </template>
    </Draggable>
</template>
 
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import Draggable from 'vuedraggable'
let drag = ref<boolean>(false)
interface iUser {
    id: number,
    name: string,
}
let myArray = reactive<iUser[]>([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '孙五' }
])
let activeInfo = computed({
    get() {
        return drag.value ? '正在拖拽中...' : '没有拖拽！！';
    },
    set() { }
});
const changeDrag = function (val: boolean) {
    drag.value = val
    console.log(drag.value)
}
</script>
<style scoped>
.drag_box {
    width: 200px;
    border-radius: 6px;
    border: 2px solid #ccc;
    padding: 0 10px;
}

.drag_item {
    border-radius: 6px;
    border: 2px solid salmon;
    margin: 10px 0;
    padding: 5px;
}
</style>