實現頁面div盒子拖拽排序功能前言：目前市面上有很多實現拖拽排序功能的外掛和方法，本節不過多累述，只講一種：3的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: ''
         http://www.cppcns.com       }
            }
        }
    </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節點
         xtikRWJ
 
       newItems.splice(oldIndex,1)
                // 在拖拽結束目標位置增加新的DOM節點
                newItems.splice(newIndex,this.oldData)
                // 每次拖拽結束後，將拖拽處理完成的資料，賦值原陣列，使DOM檢視更新，頁面顯示拖拽動畫
                this.customApps = newItems
                // 每次拖拽結束後呼叫介面時時儲存資料
               Api(this.dragStartId,this.dragEndId).then((res) => {})
            }
        },

拖拽完成動畫樣式：

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

到此這篇關於vue實www.cppcns.com現頁面div盒子拖拽排序功能的文章就介xtikRWJ紹到這了,更多相關vue div盒子拖拽排序內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！