1、安装
npm install sortablejs --save
or
yarn add sortablejs --save
2、使用 在需要使用的组件中引入
import Sortable from 'sortablejs'
3、定义方法
getList() {
this.listLoading = true
getWorkTemplateList(this.listQuery).then(response => {
this.list = response.data.records
this.total = response.data.total
this.listLoading = false
this.oldList = this.list.map(v => v.id)
this.newList = this.oldList.slice()
this.$nextTick(() => {
this.setSort()
})
})
},
setSort() {
const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = new Sortable(el, {
ghostClass: 'sortable-ghost',
setData: function(dataTransfer) {
// to avoid Firefox bug
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
},
// 监听拖动结束事件
onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
this.list.splice(evt.newIndex, 0, targetRow)
// for show the changes, you can delete in you code
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
this.newList.splice(evt.newIndex, 0, tempIndex)
}
})
},