快捷導(dǎo)航

vue使用vuedraggable對列表進行拖拽排序

更新時間：2024年12月11日 15:28:29 作者：前端太佬

vuedraggable 是一個基于 Vue 的拖拽排序組件,它可以讓你輕松地在 Vue 應(yīng)用中實現(xiàn)拖拽排序功能,下面就跟隨小編一起來了解下它的具體應(yīng)用吧

安裝 vuedraggable

通過 npm 安裝

如果你使用的是 npm，可以通過以下命令安裝 vuedraggable：

npm install vuedraggable

通過 CDN 引入

如果你不想使用 npm，可以直接通過 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>

基本用法

以下是一個簡單的 vuedraggable 使用示例，展示了如何在 Vue 組件中實現(xiàn)一個可拖拽排序的列表。

示例 1：基本的拖拽排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedraggable 示例</title>
</head>
<body>
    <div id="app">
        <draggable v-model="items" :group="{ name: 'items' }" :animation="200">
            <div v-for="item in items" :key="item.id" class="item">
                {{ item.name }}
            </div>
        </draggable>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    items: [
                        { id: 1, name: 'Item 1' },
                        { id: 2, name: 'Item 2' },
                        { id: 3, name: 'Item 3' },
                        { id: 4, name: 'Item 4' },
                    ],
                };
            },
        });

        app.mount("#app");
    </script>
</body>
</html>

代碼解釋：

v-model="items"：將組件的數(shù)據(jù)與父組件綁定。在此案例中，items 是一個數(shù)組，存儲了所有的列表項。

:group="{ name: 'items' }"：指定拖拽排序的組。如果你有多個 draggable 列表，并希望它們之間能夠拖拽排序，可以使用 group 來指定組。

:animation="200"：設(shè)置拖拽時的動畫效果，單位為毫秒。

進階用法

示例 2：實現(xiàn)多個列表的拖拽排序（跨列表拖拽）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vuedraggable 示例</title>
</head>
<body>
    <div id="app">
        <div class="list-container">
            <div class="list">
                <h3>List 1</h3>
                <draggable v-model="list1" :group="{ name: 'items', pull: 'clone', put: true }">
                    <div v-for="item in list1" :key="item.id" class="item">
                        {{ item.name }}
                    </div>
                </draggable>
            </div>

            <div class="list">
                <h3>List 2</h3>
                <draggable v-model="list2" :group="{ name: 'items', pull: false, put: true }">
                    <div v-for="item in list2" :key="item.id" class="item">
                        {{ item.name }}
                    </div>
                </draggable>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuedraggable@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    list1: [
                        { id: 1, name: 'Item 1' },
                        { id: 2, name: 'Item 2' },
                    ],
                    list2: [
                        { id: 3, name: 'Item 3' },
                        { id: 4, name: 'Item 4' },
                    ],
                };
            },
        });

        app.mount("#app");
    </script>

    <style>
        .list-container {
            display: flex;
            gap: 20px;
        }

        .list {
            width: 200px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .item {
            padding: 5px;
            margin: 5px;
            background-color: #f0f0f0;
            cursor: pointer;
        }
    </style>
</body>
</html>

代碼解釋：

在這個例子中，我們有兩個列表 list1 和 list2，并使用了 vuedraggable 來使得它們之間能夠?qū)崿F(xiàn)拖拽排序。

pull: 'clone' 表示你可以從 list1 拖動項目并將其克隆到目標(biāo)列表（list2）。 put: true 允許你將項目放入目標(biāo)列表。

pull: false 表示不允許從 list2 拖動項目到 list1。

常用屬性和事件

v-model：用于雙向綁定拖拽的數(shù)據(jù)。
group：指定拖拽的組，支持 name, pull, put 屬性。
- name: 同一組的列表可以相互拖拽。
- pull: 定義該列表是否可以拖動元素到其它列表（clone 代表克隆元素）。
- put: 定義該列表是否允許接收元素。
animation：設(shè)置拖拽時的動畫效果，單位為毫秒。
disabled：禁用拖拽功能。
ghostClass：設(shè)置拖拽過程中元素的 CSS 類。