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

这篇文章主要介绍"怎么用vue实现页面div盒子拖拽排序功能"，在日常操作中，相信很多人在怎么用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 = value        this.dragStartId = value.id    },    dragenter(value) {        this.newData = value        this.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) => {})            }        },

拖拽完成动画样式：

到此，关于"怎么用vue实现页面div盒子拖拽排序功能"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！