這是一個(gè)關(guān)于 vuedraggable 的非常詳盡的指南，涵蓋了如何使用它，以及它幾乎所有的屬性、事件、插槽和方法。

vuedraggable 是一個(gè)基于強(qiáng)大的 Sortable.js 庫(kù)的 Vue 組件，它允許你通過(guò)拖拽的方式對(duì)列表進(jìn)行排序、移動(dòng)、克隆等操作，并且與 Vue 的數(shù)據(jù)響應(yīng)式系統(tǒng)無(wú)縫集成。

1. VueDraggable 的核心概念

• 數(shù)據(jù)驅(qū)動(dòng): 你只需要管理一個(gè)數(shù)組數(shù)據(jù)，vuedraggable 會(huì)自動(dòng)處理 DOM 的移動(dòng)和更新。
• 基于 Sortable.js: 它繼承了 Sortable.js 的所有強(qiáng)大功能和配置選項(xiàng)。
• 組件化: 以 Vue 組件的形式使用，非常易于集成。

2. 如何安裝和使用

A. 安裝

對(duì)于 Vue 3 (推薦)
你需要安裝 vuedraggable@next 版本。

npm install vuedraggable@next

對(duì)于 Vue 2
使用默認(rèn)版本即可。

npm install vuedraggable

本指南將主要以 Vue 3 的 vuedraggable@next 為例，因?yàn)樗砹宋磥?lái)的方向。

B. 基本用法

下面是一個(gè)最簡(jiǎn)單的例子，展示了如何在一個(gè)列表中進(jìn)行拖拽排序。

<template>
  <div>
    <h3>可拖拽列表</h3>
    <draggable 
      v-model="myList" 
      item-key="id"
      @start="onStart"
      @end="onEnd"
    >
      <template #item="{element, index}">
        <div class="list-item">
          {{ element.name }} (ID: {{ element.id }}) - 索引: {{ index }}
        </div>
      </template>
    </draggable>
    <pre>{{ JSON.stringify(myList, null, 2) }}</pre>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const myList = ref([
  { id: 1, name: '蘋果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橘子' },
  { id: 4, name: '葡萄' }
]);
const onStart = (event) => {
  console.log('拖拽開始', event);
};
const onEnd = (event) => {
  console.log('拖拽結(jié)束', event);
  // event.oldIndex - 拖拽前的位置
  // event.newIndex - 拖拽后的位置
  console.log(`從索引 ${event.oldIndex} 移動(dòng)到 ${event.newIndex}`);
};
</script>
<style scoped>
.list-item {
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: grab;
}
.list-item:active {
  cursor: grabbing;
}
</style>

核心解釋:

1. import draggable from 'vuedraggable': 引入組件。
2. <draggable>: 這是 vuedraggable 的組件標(biāo)簽。
3. v-model="myList": 這是最關(guān)鍵的部分。它將組件與你的數(shù)據(jù)數(shù)組 myList 雙向綁定。當(dāng)你在界面上拖拽排序后，myList 數(shù)組的順序會(huì)自動(dòng)更新。
4. item-key="id": 極其重要！ 為了讓 Vue 能夠高效地跟蹤和復(fù)用每個(gè)列表項(xiàng)，你需要提供一個(gè)唯一的 key。它可以是一個(gè)字符串，指向你數(shù)組對(duì)象中唯一的屬性（如 id），或者是一個(gè)返回唯一值的函數(shù)。
5. #item="{element, index}": 這是默認(rèn)插槽的用法。vuedraggable 會(huì)遍歷你的 v-model 數(shù)組，并為每一項(xiàng)提供 element (當(dāng)前項(xiàng)的數(shù)據(jù)) 和 index (當(dāng)前項(xiàng)的索引) 作為插槽 prop，供你在模板中使用。

C. 兩個(gè)列表之間拖拽

這是另一個(gè)常見場(chǎng)景，例如從一個(gè)"待辦事項(xiàng)"列表拖到"已完成"列表。

<template>
  <div class="two-lists">
    <div>
      <h3>待辦事項(xiàng)</h3>
      <draggable
        v-model="list1"
        item-key="id"
        group="tasks"
        class="list-group"
      >
        <template #item="{element}">
          <div class="list-group-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
    <div>
      <h3>已完成</h3>
      <draggable
        v-model="list2"
        item-key="id"
        group="tasks"
        class="list-group"
      >
        <template #item="{element}">
          <div class="list-group-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const list1 = ref([
  { id: 1, name: '寫代碼' },
  { id: 2, name: '測(cè)試功能' },
]);
const list2 = ref([
  { id: 3, name: '修復(fù)Bug' },
  { id: 4, name: '上線發(fā)布' },
]);
</script>
<style>
.two-lists { display: flex; gap: 20px; }
.list-group { min-height: 100px; background-color: #eee; padding: 10px; }
.list-group-item { padding: 10px; background-color: white; border: 1px solid #ddd; margin-bottom: 5px; cursor: grab; }
</style>

核心解釋:

• group="tasks": 兩個(gè) draggable 組件設(shè)置了相同的 group 名稱。這告訴 vuedraggable，它們屬于同一個(gè)組，元素可以在它們之間相互拖拽。

3. 所有屬性 (Props)

vuedraggable 的屬性主要分為兩類：組件自身屬性和繼承自 Sortable.js 的選項(xiàng)。

A. 組件核心屬性

B. 繼承自 Sortable.js 的選項(xiàng) (作為 Props 使用)

這些屬性直接控制拖拽的行為，非常強(qiáng)大。

4. 所有事件 (Events)

你可以通過(guò) @event-name 的方式監(jiān)聽這些事件來(lái)執(zhí)行自定義邏輯。

5. 所有插槽 (Slots)

插槽示例

<draggable v-model="myList" item-key="id">
  <!-- 頭部插槽 -->
  <template #header>
    <div class="header">這是列表的頭部</div>
  </template>
  <!-- 默認(rèn)/item 插槽 -->
  <template #item="{element}">
    <div class="list-item">{{ element.name }}</div>
  </template>
  <!-- 尾部插槽 -->
  <template #footer>
    <div class="footer">這是列表的尾部</div>
  </template>
</draggable>

6. 方法 (Methods)

通常情況下，你不需要直接調(diào)用 vuedraggable 的方法，因?yàn)樗菙?shù)據(jù)驅(qū)動(dòng)的。但在某些特殊情況下，你可能需要通過(guò) ref 訪問(wèn)底層的 Sortable.js 實(shí)例。

給組件添加 ref:

<draggable ref="draggableRef" ...>

在 <script setup> 中定義 ref:

import { ref } from 'vue';
const draggableRef = ref(null);

訪問(wèn) Sortable.js 實(shí)例:
vuedraggable 將 Sortable.js 實(shí)例暴露在 sortable 屬性上。

const sortableInstance = draggableRef.value.sortable;

現(xiàn)在你可以調(diào)用 Sortable.js 的原生方法，例如：

• sortableInstance.toArray(): 返回一個(gè)包含所有子元素 data-id 的數(shù)組。
• sortableInstance.sort(orderArray): 根據(jù)提供的 ID 數(shù)組對(duì)列表進(jìn)行排序。
• sortableInstance.destroy(): 銷毀 Sortable 實(shí)例。

注意: 直接操作 Sortable.js 實(shí)例可能會(huì)繞過(guò) Vue 的響應(yīng)式系統(tǒng)，請(qǐng)謹(jǐn)慎使用。絕大多數(shù)場(chǎng)景都可以通過(guò) props 和 events 來(lái)完成。

總結(jié)

vuedraggable 是一個(gè)功能強(qiáng)大且易于使用的庫(kù)。掌握它的關(guān)鍵在于：

1. v-model 和 item-key 是基礎(chǔ)，必須正確設(shè)置。
2. 使用 group 屬性實(shí)現(xiàn)多列表交互。
3. 通過(guò) Props (如 animation, handle, ghostClass) 來(lái)定制拖拽行為和外觀。
4. 監(jiān)聽 Events (如 end, add, change) 來(lái)在拖拽操作后執(zhí)行業(yè)務(wù)邏輯（例如，向服務(wù)器發(fā)送更新后的排序）。
5. 利用 Slots (item, header, footer) 來(lái)靈活地定義列表結(jié)構(gòu)。

希望這份詳盡的指南能幫助你完全掌握 vuedraggable！

到此這篇關(guān)于Vue Draggable實(shí)現(xiàn)拖拽功能的文章就介紹到這了,更多相關(guān)Vue Draggable拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論