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

效果图：

1. DOM中使用：

    <transition-group class="container" name="sort">
        <div class="app-item" v-for="app in customApps" :key="app.id" :draggable="true"
            @dragstart="dragstart(app)"
            @dragenter="dragenter(app,$event)"
            @dragend="getDragend(customApps, 'customer', $event)">
            <div>
                <img class="icon_a" v-if="app.logo" :src="app.logo" >
                <div class="ellipsis" >{{app.name}}</div>
            </div>
        </div>
    </transition-group>

2. data中定义数据

    import { APi } from '@/api/enterpriseAPi'
    <script>
        export default {
            data() {
                return {
                    oldData: [],
                    newData: [],
                    customApps: [],
                    dragStartId: '',
                    dragEndId: ''
                }
            }
        }
    </script>

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) => {})
            }
        },

拖拽完成动画样式：

    <style lang="scss" scoped>
        .sort-move {
            transition: transform 1s;
        }
    </style>

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何利用vue实现拖拽排序效果，思路方法是什么

  这篇文章主要为大家详细介绍了vue实现移动端touch拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue事件处理的基本实现及知识点有哪些

  Vue 事件处理是每个 Vue 项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，我将介绍基础知识，并提供一些用于处理事件的代码示例。基本事件处理

• 为何用ssr服务端渲染?详解vue的ssr服务端渲染使用

  这篇文章给大家分享的是ssr服务端渲染的相关内容。下文介绍了为什么使用服务器端渲染以及vue的ssr服务端渲染使用，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• JS可枚举属性怎样判断？枚举性的作用是什么？

  今天给大家分享的是关于JS可枚举属性的内容，我们知道在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。接下来我们就一起来了解一下怎么判断属性是否可枚举和枚举性的作用。

• vue中插槽的分类有几种，用法是什么

  这篇文章主要介绍了Vue中的插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧