這期內容當中小編將會給大家帶來有關使用vue實現列表拖拽排序功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首先，我們先了解一下js原生拖動事件:
在拖動目標上觸發事件 (源元素):
釋放目標時觸發的事件:
基于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, 0, 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實現列表拖拽排序功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
