位置: IT常识 - 正文
vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序
编辑：rootadmin推荐整理分享vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
npm i sortablejs --save
或者 yarn add sortablejs
2，引入3，使用sortablejs我使用的组件库是ant design vue,
首先，获取表格的Dom元素，在Sortable构造函数中进行绑定我主要使用的是Sortablejs 中的结束拖拽之后的onEnd 属性，因为是单表格的简单拖拽排序所以只用到了自带的参数对象evt的oldIndex和newIndex这两个属性，分别表示被拖拽的数据项拖拽前的下标和拖拽完成之后的下标。
onEnd回调函数中的主要逻辑就是根据被操作的数据项的新旧下标的大小来进行判断的
当oldIndex<newIndex时，说明是向下拖拽
之后的代码的核心思想是：
1，创建一个临时变量保存被拖拽的数据项 temp = tableData[oldIndex]
2，将数组中索引为oldIndex+1~newIndex中的数据依次向前一位赋值
3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp
当oldIndex>newIndex时，说明是向上拖拽代码逻辑同上
1，创建一个临时变量保存被拖拽的数据项temp = tableData[oldIndex]
2,将数组中索引为newIndex~oldIndex-1的元素依次向后一位赋值
3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp;
当做完这些操作之后只能保证表格中的数据项和数据下标是对着的，但是此时表格中的数据项之间还是乱序的
在写完拖拽操作之后还要调用组件库内置的排序方法，对表格序号进行排序，这样才能完成拖拽操作。
上一篇：日本北海道 (© Hiroshi Yokoyama/eStock Photo)
