「这是我参与2022首次更文挑战的第35天，活动详情查看：2022首次更文挑战」。

前段时间，新项目要做一个看板模块。首先想到了element提供的穿梭框，仔细看完后，发现穿梭框并不能实现想要的功能。公司项目之前开发过类似的拖动功能，在嵌套数组中的元素，互相拖动，单个数组中的元素也可以进行拖动排序。

看完文档，一小时搞定，实在是太好用了，推荐给大家。

实现效果类似上图，将两个数组中的内容可互相拖动，单个数组本身也是可以拖动排序的。

Vue-draggable在移动端的触摸使用体验也非常好，是vue项目中最常见的拖动组件。

安装Vue-draggable

yarn

yarn add vuedraggable

npm

npm install vue-draggable

使用

1.引入

import draggable from 'vuedraggable';

2.template部分

<template>
  <div class="row">
    <div class="col-4">
      <!-- 第一个拖动列表 -->
      <draggable
        id="first"
        data-source="juju"
        :list="list"
        class="list-group"
        draggable=".item"
        group="a"
      >
        <div
          class="list-group-item item"
          v-for="element in list"
          :key="element.name"
        >
          {{ element.name }}
        </div>

        <div
          slot="header"
          class="btn-group list-group-item"
          role="group"
          aria-label="Basic example"
        >
          <button class="btn btn-secondary" @click="add">Add</button>
          <button class="btn btn-secondary" @click="replace">Replace</button>
        </div>
      </draggable>
    </div>

    <div class="col-4">
      <!-- 第二个拖动列表 -->
      <draggable :list="list2" class="list-group" draggable=".item" group="a">
        <div
          class="list-group-item item"
          v-for="element in list2"
          :key="element.name"
        >
          {{ element.name }}
        </div>

        <div
          slot="header"
          class="btn-group list-group-item"
          role="group"
          aria-label="Basic example"
        >
          <button class="btn btn-secondary" @click="add2">Add</button>
          <button class="btn btn-secondary" @click="replace2">Replace</button>
        </div>
      </draggable>
    </div>
    <!-- 第一个列表数据 -->
    <rawDisplayer class="col-2" :value="list" title="List" />
    <!-- 第二个列表数据 -->
    <rawDisplayer class="col-2" :value="list2" title="List2" />
  </div>
</template>

script部分

<script>
import draggable from "@/vuedraggable";
let id = 1;
export default {
  name: "two-list-headerslots",
  display: "Two list header slot",
  order: 14,
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { name: "John 1", id: 0 },
        { name: "Joao 2", id: 1 },
        { name: "Jean 3", id: 2 }
      ],
      list2: [{ name: "Jonny 4", id: 3 }, { name: "Guisepe 5", id: 4 }]
    };
  },
  methods: {
    add: function() {
      this.list.push({ name: "Juan " + id, id: id++ });
    },
    replace: function() {
      this.list = [{ name: "Edgard", id: id++ }];
    },
    add2: function() {
      this.list2.push({ name: "Juan " + id, id: id++ });
    },
    replace2: function() {
      this.list2 = [{ name: "Edgard", id: id++ }];
    }
  }
};
</script>

事件汇总

事件	描述
onChoose	元素被选中
onUnchoose	未选择元素
onStart	元素拖动开始
onEnd	元素拖动结束
onAdd	元素从另一个列表拖放到列表中
onUpdate	更改列表中的排序
onSort	由列表的任何更改调用（添加/更新/删除）
onRemove	元素从列表中移除到另一个列表中
onFilter	尝试拖动过滤的元素
onMove	在列表中或列表之间移动项目时的事件
onClone	创建元素的克隆时调用
onChange	当拖动元素改变位置时调用

注意事项

1.循环出的数据一定要设置key，否则在添加/删除元素时会导致很多问题。

2.两个互相拖动的列表需要有相同的数据结构。

3.页眉或页脚插槽都不能与 tarnstion-group 一起使用。

Vue Draggable：让拖动不在是问题