vue实现页面div盒子拖拽排序功能 vue实现页面div盒子拖拽排序功

vue 实现页面div盒子拖拽排序功能前言：目前市面上有很多实现拖拽排序功能的插件和方法，本节不过多累述，只讲一种：css3的transition-group方法

效果图：

文章图片

1. DOM中使用：

文章图片
{{app.name}}

2. data中定义数据

import { APi } from '@/api/enterpriseAPi'

3. methods方法中使用

dragstart(value) {this.oldData = https://www.it610.com/article/valuethis.dragStartId = value.id},dragenter(value) {this.newData = valuethis.dragEndId = value.id},getDragend(listData, type) {if (this.oldData !== this.newData) {let oldIndex = listData.indexOf(this.oldData)let newIndex = listData.indexOf(this.newData)let newItems = [...listData]// 删除之前DOM节点newItems.splice(oldIndex, 1)// 在拖拽结束目标位置增加新的DOM节点newItems.splice(newIndex, 0, this.oldData)// 每次拖拽结束后，将拖拽处理完成的数据，赋值原数组，使DOM视图更新，页面显示拖拽动画this.customApps = newItems// 每次拖拽结束后调用接口时时保存数据Api(this.dragStartId, this.dragEndId).then((res) => {})}},

拖拽完成动画样式：