Vue中使用vuedraggable完整指南-newbie

文章目录

在 Vue 中使用 vuedraggable 完整指南

在 Vue 中使用 `vuedraggable` 完整指南

vuedraggable 是一个基于 Vue 的拖拽排序组件，封装了 SortableJS，可以帮助快速实现拖拽排序、拖拽移动等功能。这个组件支持多种拖拽操作，可以轻松实现列表、卡片等元素的交互功能。

1. 安装 `vuedraggable`

首先需要安装 vuedraggable，可以使用 npm 或 yarn 进行安装。

npm install vuedraggable

或

yarn add vuedraggable

2. 导入 `vuedraggable`

在需要使用的 Vue 组件中导入 vuedraggable，并将其注册为一个局部组件。

import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' }
      ]
    };
  }
};

3. 在模板中使用 `draggable`

在模板中，将 draggable 用作容器，包裹需要拖拽的列表项，并通过 v-model 将拖拽的列表项与组件的 data 数据绑定。

<template>
  <div>
    <draggable v-model="items" group="items" @end="onDragEnd">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

v-model="items"：绑定数据，确保拖拽后数组的顺序会自动更新。
group="items"：设置拖拽组，可以允许不同列表之间的元素互相拖动。如果只有一个列表，不需要设置 group。
@end="onDragEnd"：监听拖拽结束的事件。

4. 事件处理

vuedraggable 提供了几个常用的事件，可以在拖拽开始和结束时执行特定的逻辑。

@start：拖拽开始时触发。
@end：拖拽结束时触发。
@add：当元素被插入到拖拽列表时触发。
@remove：当元素被移出列表时触发。

例如，使用 @end 事件来处理拖拽后的逻辑：

methods: {
  onDragEnd(evt) {
    console.log('拖拽结束', evt);
    // 可以在这里处理数据更新、保存排序等操作
  }
}

5. 样式

为每个拖拽项添加样式，确保它们具有明显的可拖拽视觉提示：

<style scoped>
.item {
  padding: 10px;
  margin: 5px;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  cursor: move; /* 提示用户可以拖拽 */
}
</style>

6. 高级功能

禁用拖拽

通过设置 :disabled="true"，可以禁用整个拖拽功能。

<draggable :disabled="true" v-model="items">
  <!-- 这里的内容不能被拖拽 -->
</draggable>

自定义拖拽句柄

使用 :handle 属性指定可以拖拽的区域，例如可以通过添加一个特定的 “拖拽图标” 来控制拖拽区域：

<draggable v-model="items">
  <div v-for="item in items" :key="item.id" class="item">
    <span class="handle">☰</span> <!-- 只有点击这个区域才可以拖拽 -->
    {{ item.name }}
  </div>
</draggable>

7. 拖拽组

vuedraggable 支持多个拖拽组，用于跨多个列表之间拖拽元素。在多个 draggable 组件中，设置相同的 group 属性，就能实现跨列表的拖拽操作。

<draggable v-model="items1" group="shared" class="list">
  <div v-for="item in items1" :key="item.id" class="item">
    {{ item.name }}
  </div>
</draggable>

<draggable v-model="items2" group="shared" class="list">
  <div v-for="item in items2" :key="item.id" class="item">
    {{ item.name }}
  </div>
</draggable>

在这个例子中，items1 和 items2 可以互相拖动，形成跨列表拖拽的功能。

8. 保存拖拽后的顺序

当拖拽完成后，通常需要保存新的排序顺序。通过监听 @end 事件并将新的数据传到服务器或本地存储，可以实现数据的持久化。

methods: {
  onDragEnd(evt) {
    console.log('新的顺序:', this.items);
    // 将新的顺序保存到后端或本地存储
  }
}

官方文档参考

更多的配置选项和功能说明，可以参考 vuedraggable 的官方文档：

vuedraggable 官方文档

总结

vuedraggable 是一个功能强大的拖拽组件，可以轻松实现 Vue 应用中的列表排序和跨列表拖拽。通过简单的安装和配置，可以快速为项目添加拖拽功能，并通过自定义事件和样式进行扩展。

付鹏篚

Vue中使用vuedraggable完整指南

在 Vue 中使用 vuedraggable 完整指南

1. 安装 vuedraggable

2. 导入 vuedraggable

3. 在模板中使用 draggable