vue實現列表拖拽排序的功能
阿新 • • 發佈:2020-11-03
在日常開發中,特別是管理端,經常會遇到要實現拖拽排序的效果;這裡提供一種簡單的實現方案。
此例子基於vuecli3
首先,我們先了解一下js原生拖動事件:
在拖動目標上觸發事件(源元素):
- ondragstart- 使用者開始拖動元素時觸發
- ondrag - 元素正在拖動時觸發
- ondragend - 使用者完成元素拖動後觸發
釋放目標時觸發的事件:
- ondragenter- 當被滑鼠拖動的物件進入其容器範圍內時觸發此事件
- ondragover- 當某被拖動的物件在另一物件容器範圍內拖動時觸發此事件
- ondragleave- 當被滑鼠拖動的物件離開其容器範圍內時觸發此事件
- ondrop- 在一個拖動過程中,釋放滑鼠鍵時觸發此事件
基於js的原生拖拽事件,本次實現的拖拽排序的原理大概是:滑鼠按住列表某一項開始拖動時觸發ondragstart事件,將該拖動項用變數記錄下來;
接著拖拽過程中,該拖動項經過列表其他項時,觸發ondragenter事件,同樣記錄該拖動項最後經過的列表其他項的資料,最後在ondragend 事件中
將陣列列表刪掉一開始ondragstart事件記錄的拖動項,並將刪掉的資料插入ondragenter事件最後記錄的位置,完成拖動排序。
具體程式碼如下:
<template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList" :key='item.id' class="sort-item" :draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item,$event)" @dragend="dragend(item,$event)" @dragover="dragover($event)" > {{ item.label }} </div> </transition-group> </div> </template> <script lang="ts"> import {Vue,Component,Prop,Watch} from "vue-property-decorator"; import { addWebsite } from '@/api' @Component({ components: {} }) export default class Test extends Vue { oldData: any = null; // 開始排序時按住的舊資料 newData: any = null; // 拖拽過程的資料 // 列表資料 dataList:any = [ { id:1,label:'測試一號' },{ id:2,label:'測試二號' },{ id:3,label:'測試三號' },{ id:4,label:'測試四號' },]; dragstart(value: any) { this.oldData = value } // 記錄移動過程中資訊 dragenter(value: any,e: any) { this.newData = value e.preventDefault() } // 拖拽最終操作 dragend(value: any,e: any) { if (this.oldData !== this.newData) { let oldIndex = this.dataList.indexOf(this.oldData) let newIndex = this.dataList.indexOf(this.newData) let newItems = [...this.dataList] // 刪除老的節點 newItems.splice(oldIndex,1) // 在列表中目標位置增加新的節點 newItems.splice(newIndex,this.oldData) this.dataList = [...newItems] } } // 拖動事件(主要是為了拖動時滑鼠游標不變為禁止) dragover(e: any) { e.preventDefault() } }; </script>
另外
為了實現拖動的動畫效果,這裡用到了transition-group元件,如上面程式碼顯示,將transition-group元件的屬性name設為‘sort';並新增以下程式碼;
.sort-move { transition: transform 0.3s; }
注意:為了讓transition有效果出現,v-for渲染的資料列表必須有key屬性,且該key屬性不可設為index;
最終效果如下:
以上就是vue實現列表拖拽排序的功能的詳細內容,更多關於vue 拖拽排序的資料請關注我們其它相關文章!