vue3中使用sortablejs + el-table中实现拖动行
一、安装：yarn install --save sortablejs
二、使用示例：
<script lang="ts" setup>
import {
Plus } from '@element-plus/icons-vue'
import Sortable from 'sortablejs'
const tableData = ref([
{
date: '2016-05-03',
name: '111',
address: 'admin123',
},
{
date: '2016-05-02',
name: '222',
address: 'admin123',
},
{
date: '2016-05-04',
name: '333',
address: 'admin123',
},
{
date: '2016-05-01',
name: '444',
address: 'admin123',
},
])
const req_table = ref(null)
const initSortable = () => {
nextTick(() => {
const table = req_table.value.querySelector('.el-table__body-wrapper tbody')
// const table = document.querySelector('.reqtable .el-table__body-wrapper tbody') // 使用这种方法路由切换后再切换回来获取不到
const dragTable = Sortable.create(table, {
handle: '.move', // 指定拖拽目标，拖拽此目标才可拖拽元素(本示例中为plus图标)，不设置此属性则拖动table行元素（tbody子元素）
onEnd: ({
newIndex, oldIndex }) => {
if (oldIndex !== newIndex)
console.log('拖动成功', `元素拖动前索引${
oldIndex}---元素拖动后索引${
newIndex}`)
},
})
})
}
nextTick(() => {
initSortable()
})
</script>
<template>
<div ref="req_table">
<el-table row-key="id" mt-9px :data="tableData" style="width: 100%" border>
<el-table-column label="排序" width="50">
<template #default>
<Plus size="10px" cursor="pointer" class="move" />
</template>
</el-table-column>
<el-table-column prop="name" label="名称" />
<el-table-column prop="address" label="地址" />
<el-table-column prop="date" label="日期" />
</el-table>
</div>
</template>
const table = document.querySelector(‘.reqtable .el-table__body-wrapper tbody’) // 使用这种方法路由切换后再切换回来获取不到dom元素，取到的值为null
vue2中拖动div
<div class="sign_step" ref="sortitem">
<div class="move">item1</div>
<div class="move">item1</div>
<div class="move">item1</div>
</div>
initSortable () {
const that = this
this.$nextTick(()=>{
const sort = that.$refs.sortitem
Sortable.create(sort,{
//动画效果
animation: 1000,
// 是否执行两个盒子之间互换
group:'box',
handle: '.move', // 指定拖拽目标
onEnd: ({
newIndex, oldIndex }) => {
console.log('拖动成功', `元素拖动前索引${
oldIndex}---元素拖动后索引${
newIndex}` )
}
})
})
},