vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

npm i sortablejs --save

或者 yarn add sortablejs

vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

我使用的组件库是ant design vue,

我主要使用的是Sortablejs 中的结束拖拽之后的onEnd 属性，因为是单表格的简单拖拽排序所以只用到了自带的参数对象evt的oldIndex和newIndex这两个属性，分别表示被拖拽的数据项拖拽前的下标和拖拽完成之后的下标。

onEnd回调函数中的主要逻辑就是根据被操作的数据项的新旧下标的大小来进行判断的

之后的代码的核心思想是：

1，创建一个临时变量保存被拖拽的数据项 temp = tableData[oldIndex]

2，将数组中索引为oldIndex+1~newIndex中的数据依次向前一位赋值

3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp

代码逻辑同上

1，创建一个临时变量保存被拖拽的数据项temp = tableData[oldIndex]

2,将数组中索引为newIndex~oldIndex-1的元素依次向后一位赋值

3，最后将临时变量temp对tableData[newIndex]进行赋值tableData[newIndex] = temp;

当做完这些操作之后只能保证表格中的数据项和数据下标是对着的，但是此时表格中的数据项之间还是乱序的

在写完拖拽操作之后还要调用组件库内置的排序方法，对表格序号进行排序，这样才能完成拖拽操作。

vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

文章来源地址https://www.toymoban.com/news/detail-504106.html

到了这里，关于vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序