Vue.draggable使用文档超详细总结

介绍

Vue.draggable是一个基于Sortable.js实现的Vue.js拖放库。它允许您在应用程序中轻松创建可拖放的UI组件，同时提供许多配置选项，使您能够自定义拖动行为。以下是Vue.draggable提供的主要功能：

• 支持嵌套列表和树形结构
• 支持拖放元素并在不同列表之间排序
• 支持组件自定义渲染以及自定义占位符
• 支持 touch 事件

安装

你可以通过npm安装Vue.draggable：

npm install vuedraggable

使用

在你的Vue组件中导入Vue.draggable和相关CSS样式：

import draggable from "vuedraggable"
import "vuedraggable/dist/vuedraggable.css"

Vue.draggable可以在任何Vue组件中使用。你只需在template中使用'draggable'标签包裹要拖拽的元素列表，然后可以配置各种选项，如：group（分组）、ghostClass（占位符）、animation、forceFallback等。

假设你有一个待办列表，可以定义并渲染 'TodoList' 组件，如下所示：

<template>
  <div>
    <h2>TodoList</h2>
    <draggable v-model="todos">
      <div v-for="(todo, index) in todos" :key="todo.id">
        {{ todo.title }} - {{ todo.completed ? 'Done' : 'Not Done' }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable"
import "vuedraggable/dist/vuedraggable.css"

export default {
  components: {
    draggable,
  },
  data() {
    return {
      todos: [
        { id: 1, title: "Do the laundry", completed: false },
        { id: 2, title: "Buy groceries", completed: true },
        { id: 3, title: "Clean the house", completed: false },
      ],
    };
  },
};
</script>

在此代码中，我们通过使用v-model将'todos'数组绑定到draggable组件来实现拖拽排序的功能。

拖放事件

Vue.draggable提供了多个拖放事件，可以监听组件的各种状态变化。以下是最常见的拖动事件：

drag - 在拖拽过程中触发
start - 开始拖动时触发
end - 拖动结束时触发

以下是一个监听'drag'(拖拽过程中发生变化时)事件的示例:

<template>
  <div>
    <h2>TodoList</h2>
    <draggable 
      v-model="todos" 
      :options="{group:'todos',animation:150}" 
      @drag="onDrag">
      <div v-for="(todo, index) in todos" :key="todo.id">
        {{ todo.title }} - {{ todo.completed ? 'Done' : 'Not Done' }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable"
import "vuedraggable/dist/vuedraggable.css"

export default {
  components: {
    draggable,
  },
  data() {
    return {
      todos: [
        { id: 1, title: "Do the laundry", completed: false },
        { id: 2, title: "Buy groceries", completed: true },
        { id: 3, title: "Clean the house", completed: false },
      ],
    };
  },
  methods:{
    onDrag(e){
      console.log(e); // 打印出拖放事件的相关信息
    }
  }
};
</script>

嵌套示例

Vue.draggable也可以用于嵌套列表和树形结构。以下是一个包含两层嵌套列表的示例:

<template>
  <div>
    <draggable v-model="listA">
      <div v-for="(itemA, indexA) in listA" :key="itemA.id">
        <h3>{{ itemA.text }}</h3>
        <draggable v-model="itemA.children">
          <div v-for="(itemB, indexB) in itemA.children" :key="itemB.id">
            {{ itemB.text }}
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable"
import "vuedraggable/dist/vuedraggable.css"

export default {
  components: {
    draggable,
  },
  data() {
    return {
      listA: [
        {
          id: 1,
          text: "Item 1",
          children: [
            { id: 2, text: "Child 1" },
            { id: 3, text: "Child 2" },
          ],
        },
        {
          id: 4,
          text: "Item 2",
          children: [
            { id: 5, text: "Child 3" },
            { id: 6, text: "Child 4" },
          ],
        },
      ],
    };
  },
};
</script>

我们可以通过嵌套循环在一个listA中创建嵌套的Dragegable组件，并在内部Dragegable中创建一个拖动列表子元素的另一个循环。

结论

Vue.draggable是基于Sortable.js实现的Vue.js拖拽和排序库，它支持组件自定义渲染以及自定义占位符，并具有很多其他的配置选项。我们可以使用v-model将待排序的组件与本地状态绑定在一起，同时响应拖放的事件，实现灵活的交互体验。