python实现拖拽排序

Python

def change_intro_case(**kwargs):
	cur_id=kwargs.get('cur_id')
	next_id=kwargs.get('next_id')
	if cur_id==next_id:
		return
	cur_obj=Person.objects.get(pk=cur_id)
	next_obj=Person.objects.get(pk=next_id)
	if cur_obj.order >next_obj.order:
		# 上移
		Person.objects.filter(order__gte=next_obj.order,order__lt=cur_obj.order).update(order=F('order')+1)
	elif cur_obj.order<next_obj.order:
		# 下移
		Person.objects.filter(order__gt=cur_obj.order,order__lte=next_obj.order).update(order=F('order')-1)
	# 交换排序
	cur_obj.order=next_obj.order
	cur_obj.save()

Vue:

npm install sortablejs --save

import Sortable from 'sortable.js'
mounted(){
	this.rowDrop()
}
// 行拖拽
rowDrop(){
	const tbody = document.querySelector('.el-table__body-wrapper tbody')
	const _this=this
	Sortable.create(tbody,{
		sort:true,
		animation:300,
		onEnd({newIndex,oldIndex}){
			if(newIndex!=oldIndex){
				_this.loading=true
				const nextRow=_this.data[newIndex]
				const curRow=_this.data[oldIndex]
				_this.changeTable(curRow.id,nextRow.id)
			}
		}
	})
}