一、概述
Vue3 Vuedraggable是一個基於Vue3框架的拖放庫，它允許用戶快速創建可拖動，可放置和可排序的列表。
二、安裝
通過npm進行安裝：
npm install vuedraggable --save
引入vuedraggable組件：
import draggable from 'vuedraggable';
三、使用vuedraggable組件
使用vuedraggable組件來創建一個可拖放的列表需要做以下幾步：
1. 準備數據
在組件中定義一個數組作為列表數據源：
data() {
return {
list: ['one', 'two', 'three', 'four']
}
}
2. 使用v-for指令渲染列表
在組件中使用v-for指令將數據源渲染成列表：
- {{item}}
3. 使用vuedraggable指令
使用vuedraggable指令將渲染好的列表變成可拖拽的列表：
- {{item}}
四、配置
除了基本的使用方式之外，vuedraggable還支持其他一些高級配置項，以下是一些常用的配置項：
1. cloning
默認情況下，當你拖拽一個元素時，這個元素會通過「移動」方式被拖動走，這意味著元素本身在列表中的位置已經改變了，如果你想保留列表中所有元素在拖拽之前的位置，則可以將cloning選項設置為true。
- {{item}}
2. handle
默認情況下，您可以通過單擊列表中的任何元素來拖動它。如果您想限制拖動的部分，可以設置handle選項。handle選項指定一個選擇器作為拖動句柄，只有選中的元素才可以拖曳。
- drag
原創文章，作者：REFTY，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/373137.html
微信掃一掃 
支付寶掃一掃 