在日常開(kāi)發(fā)中，特別是管理端，經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果；這里提供一種簡(jiǎn)單的實(shí)現(xiàn)方案。

此例子基于vuecli3

首先，我們先了解一下js原生拖動(dòng)事件:

在拖動(dòng)目標(biāo)上觸發(fā)事件 (源元素):

ondragstart - 用戶開(kāi)始拖動(dòng)元素時(shí)觸發(fā) ondrag - 元素正在拖動(dòng)時(shí)觸發(fā) ondragend - 用戶完成元素拖動(dòng)后觸發(fā)

釋放目標(biāo)時(shí)觸發(fā)的事件:

ondragenter - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象進(jìn)入其容器范圍內(nèi)時(shí)觸發(fā)此事件 ondragover - 當(dāng)某被拖動(dòng)的對(duì)象在另一對(duì)象容器范圍內(nèi)拖動(dòng)時(shí)觸發(fā)此事件 ondragleave - 當(dāng)被鼠標(biāo)拖動(dòng)的對(duì)象離開(kāi)其容器范圍內(nèi)時(shí)觸發(fā)此事件 ondrop - 在一個(gè)拖動(dòng)過(guò)程中，釋放鼠標(biāo)鍵時(shí)觸發(fā)此事件

　基于js的原生拖拽事件，本次實(shí)現(xiàn)的拖拽排序的原理大概是：鼠標(biāo)按住列表某一項(xiàng)開(kāi)始拖動(dòng)時(shí)觸發(fā)ondragstart事件，將該拖動(dòng)項(xiàng)用變量記錄下來(lái)；

接著拖拽過(guò)程中，該拖動(dòng)項(xiàng)經(jīng)過(guò)列表其他項(xiàng)時(shí)，觸發(fā)ondragenter事件，同樣記錄該拖動(dòng)項(xiàng)最后經(jīng)過(guò)的列表其他項(xiàng)的數(shù)據(jù)，最后在ondragend 事件中

將數(shù)組列表刪掉一開(kāi)始o(jì)ndragstart事件記錄的拖動(dòng)項(xiàng)，并將刪掉的數(shù)據(jù)插入ondragenter事件最后記錄的位置，完成拖動(dòng)排序。

　具體代碼如下：

<template> <div @dragover='dragover($event)'> <transition-group name='sort'> <div v-for='(item) in dataList' :key=’item.id’ :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; // 開(kāi)始排序時(shí)按住的舊數(shù)據(jù) newData: any = null; // 拖拽過(guò)程的數(shù)據(jù) // 列表數(shù)據(jù) dataList:any = [ { id:1,label:’測(cè)試一號(hào)’ }, { id:2,label:’測(cè)試二號(hào)’ }, { id:3,label:’測(cè)試三號(hào)’ }, { id:4,label:’測(cè)試四號(hào)’ }, ]; dragstart(value: any) { this.oldData = value } // 記錄移動(dòng)過(guò)程中信息 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]// 刪除老的節(jié)點(diǎn)newItems.splice(oldIndex, 1)// 在列表中目標(biāo)位置增加新的節(jié)點(diǎn)newItems.splice(newIndex, 0, this.oldData)this.dataList = [...newItems] } } // 拖動(dòng)事件（主要是為了拖動(dòng)時(shí)鼠標(biāo)光標(biāo)不變?yōu)榻梗? dragover(e: any) { e.preventDefault() } };</script>

另外

為了實(shí)現(xiàn)拖動(dòng)的動(dòng)畫(huà)效果，這里用到了transition-group組件，如上面代碼顯示，將transition-group組件的屬性name設(shè)為‘sort’；并添加以下代碼；

.sort-move { transition: transform 0.3s; }

注意：為了讓transition有效果出現(xiàn)，v-for渲染的數(shù)據(jù)列表必須有key屬性，且該key屬性不可設(shè)為index；

最終效果如下：

以上就是vue實(shí)現(xiàn)列表拖拽排序的功能的詳細(xì)內(nèi)容，更多關(guān)于vue 拖拽排序的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！