vue 实现table上下拖拽行功能

在项目中要实现表格可以上下拖拽行，这样一个功能
下面是实现的代码

显示

列名

拖动调整顺序

//---------------js代码------------------------------
const items = ref([
{ id: 1, name: ‘Item 1’, value: ‘Value 1’ },
{ id: 2, name: ‘Item 2’, value: ‘Value 2’ },
{ id: 3, name: ‘Item 3’, value: ‘Value 3’ },
])

let dragIndex = null

const dragStart = (index) => {
dragIndex = index
}

const drop = (newIndex) => {
if (dragIndex !== newIndex) {
const toBeMoved = items.value[dragIndex]
items.value.splice(dragIndex, 1)
items.value.splice(newIndex, 0, toBeMoved)
dragIndex = null
}
}
//------------------css样式-----------------------------
.tablebox {
border-top: 1px solid #e4e4e4;
border-left: 1px solid #e4e4e4;
.head {
display: flex;
background: #f5f5f5;
.borderright {
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
font-size: 13px;
color: #333333;
font-family: ‘微软雅黑 Bold’, ‘微软雅黑 Regular’, ‘微软雅黑’;
font-weight: 700;
line-height: 40px;
}
}
.line {
display: flex;
line-height: 40px;
.borderright {
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
}
}

希望可以帮到你~
看到这如果对你有用的话不如留下你的足迹
加个关注
不迷路~~~~