vue3拖拽排序使用Sortable，获取拖拽排序之后的数据

1.安装Sortable

npm install sortablejs

2.导入

import Sortable from 'sortablejs'

3.使用

// html// js// dom获取节点const el = document.getElementById('example')const sortableHtml = new Sortable(el, {animation: 150,// 拖拽时预览图样式ghostClass: 'blue-background-class',// 具体配置见http://www.sortablejs.com/options.html})

Sortable.js中文网|配置Sortable相关配置：Sortable.js中文网|配置

vue3拖拽使用Sortable，获取拖拽之后的数据，Sortable拖拽结束之后获取的数据是没有改变的

 通过绑定onEnd回调方法，获取返回的evt对象，对象中存在oldIndex及newIndex参数，虽然拖拽之后获取的数据是没有改变的，而且此时更改绑定的数据会出现页面拖拽排序之后的序列出现错乱，所以我们可以在页面加载时深拷贝原始数据

onEnd方法返回的index参数是更改之后的，即index参数是实时更新的，所以我们可以通过index来对数据进行更改

const newFormTable = ref([])
onMounted(() => {// 深拷贝数据newFormTable.value = JSON.parse(JSON.stringify(formTable。vallue))const el = document.getElementById('example')const sortableHtml = new Sortable(el, {animation: 150,// 拖拽时预览图样式ghostClass: 'blue-background-class',// 拖拽结束onEnd: (evt) => {// 通过index更改数据，获取拖拽排序之后的数据const changeData = newFormTable.value.splice(evt.oldIndex || 0, 1)newFormTable.value.splice(evt.newIndex || 0, 0, changeData[0])}})
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！