1.安装插件
yarn add vuedraggable@next
npm i -S vuedraggable@next
2.举个栗子
<draggable
v-model="myArray"
group="people"
@start="drag=true"
@end="drag=false"
item-key="id">
<template #item="{element}">
<div>{{element.name}}</div>
</template>
</draggable>
简单表格(带表头)
需要加 With header slot
<table align="left">
<Draggable
:list="list"
:animation="100"
item-key="id"
class="list-group"
:forceFallback="true"
ghost-class="ghost"
@change="onMoveCallback"
:move="getdata"
draggable=".tr"
>
<template #item="{ element }">
<tr class="tr">
<td>
{{ element.userId }}
</td>
<td>
{{ element.nickName }}
</td>
<td>
{{ element.sex }}
</td>
</tr>
</template>
<!-- 表头 -->
<template #header>
<tr>
<th>userId</th>
<th>nickName</th>
<th>sex</th>
</tr>
</template>
</Draggable>
</table>
当然,头可插入,尾部一样,如有需要也可添加
<draggable v-model="myArray" item-key="id">
<template #item="{element}">
<div> {{element.name}} </div>
</template>
<template #header>
<button @click="addPeople">Add</button>
</template>
<template #footer>
<button @click="addPeople">Add</button>
</template>
</draggable>
3.简单表格拖拽功能:
<template>
<div class="contain">
<table align="left">
<Draggable
:list="list"
:animation="100"
item-key="id"
class="list-group"
:forceFallback="true"
ghost-class="ghost"
@change="onMoveCallback"
:move="getdata"
draggable=".tr"
>
<template #item="{ element }">
<tr class="tr">
<td>
{{ element.userId }}
</td>
<td>
{{ element.nickName }}
</td>
<td>
{{ element.sex }}
</td>
</tr>
</template>
<!-- 表头 -->
<template #header>
<tr>
<th>userId</th>
<th>nickName</th>
<th>sex</th>
</tr>
</template>
</Draggable>
</table>
</div>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import Draggable from 'vuedraggable'
import { GetUserList } from '/@/api/sys/user';
let list = ref([]);
const onMoveCallback = (val) => {
console.log('拖动前的索引 :' + val.moved.newIndex);
console.log('拖动后的索引 :' + val.moved.oldIndex);
};
const getdata = (val) => {
console.log(val.draggedContext.element.id);
};
const getList = async () => {//获取列表接口};
getList();
</script>
<style scoped>
.contain{
margin: 20px;
padding: 20px;
min-width: 1120px;
}
table{
background: #fefefe;
}
td,th{
padding: 16px;
border: 1px solid #ccc;
}
</style>