vue 拖拽列表
阿新 • • 發佈:2020-07-21
拖放:
拖動的物件,需要設定draggable
屬性為true
(draggable="true"
),a
元素需要href
,img
元素需要src
。
1、被拖物件:dragstart
事件,被拖動的元素,開始拖放觸發
2、被拖物件:drag
事件,被拖放的元素,拖放過程中
3、被拖物件:dragend
事件,拖放的物件元素,拖放操作結束
4、經過物件:dragenter
事件,拖放過程中滑鼠經過的元素,被拖放的元素“開始”進入其它元素範圍內(剛進入)
5、經過物件:dragover
事件,拖放過程中滑鼠經過的元素,被拖放的元素正在本元素範圍內移動(一直)
6、經過物件:dragleave
事件,拖放過程中滑鼠經過的元素,被拖放的元素離開本元素範圍
7、目標地點:drop
利用vue原生的元件<transition-group
>可實現列表的過渡效果,不僅可以實現進入和離開動畫,還可以改變定位。官網示例如下:
拖拽列表程式碼
<template> <div class="drag-wrap"> <h2>這是一個列表拖拽</h2> <transition-group name="List"> <div class="drag-list" v-for="item in List" :key="item.id" draggable="true" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend(item)" >{{item.title}}</div> </transition-group> </div> </template> <script> export default { data() { return { List: [ { id: 1, title: "這裡是列表1的標題" }, { id: 2, title: "這裡是列表2的標題" }, { id: 3, title: "這裡是列表3的標題" }, { id: 4, title: "這裡是列表4的標題" }, { id: 5, title: "這裡是列表5的標題" }, { id: 6, title: "這裡是列表6的標題" }, { id: 7, title: "這裡是列表7的標題" } ], oldItem: '', newItem: '', } }, methods: { // 記錄初始資訊 dragstart(item) { this.oldItem = item; }, // 記錄過程中資訊 dragenter(item) { this.newItem = item; }, // 做最終操作 dragend(item) { if(this.oldItem != this.newItem) { let oldIndex = this.List.indexOf(this.oldItem); let newIndex = this.List.indexOf(this.newItem); let newList = [...this.List]; // 中間陣列,用於交換兩個節點 // 刪除老的節點 newList.splice(oldIndex,1); // 在列表目標位置增加新的節點 newList.splice(newIndex,0,this.oldItem); // 更新this.List,觸發transition-group的動畫效果 this.List = [...newList]; } } } } </script> <style scoped> .List-move { transition: transform 1s; } .drag-list { margin: 0 auto; width: 300px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #20a0ff; background-color: #bfa; } </style>
總結
該程式碼的思路就是
- 1、拖拽剛開始時記錄被拖拽節點
- 2、在拖拽過程中記錄當前經過的節點
- 3、在拖拽結束後,判斷當前經過的節點是否是拖拽剛開始時的節點
- 4、如果節點位置發生了改變,就利用一箇中間陣列將兩個節點交換位置,然後更新List
- 5、當List更新時會觸發
的.List-move過渡屬性,實現動畫效果