1. 安装

npm i -S vuedraggable

或者

yarn add vuedraggable

2. 入门示例

2.1. 页面引入

import draggable from "vuedraggable"

2.2. 注册组件

  components: {
     draggable
  },

2.3. 使用

<template>
  <div style="height: 500px; width: 500px; border: 1px solid red; position: relative;">
    <draggable v-model="myArray" v-bind="dragOptions">
      <transition-group type="transition" name="flip-list">
        <div class="item-class" v-for="element in myArray" :key="element.id">{{ element.name }}</div>
      </transition-group>
    </draggable>
    <div>123</div>
    <draggable v-model="myArray2" v-bind="dragOptions">
      <transition-group>
        <div class="item-class" v-for="element in myArray2" :key="element.id">{{ element.name }}</div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
export default {
  name: "VueDraggable",
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: "description",
        disabled: false,
        ghostClass: "ghost"
      };
    }
  },
  data() {
    return {
      myArray: [
        {id: 1, name: 'name1'},
        {id: 2, name: 'name2'},
        {id: 3, name: 'name3'}
      ],
      myArray2: [
        {id: 4, name: 'name4'}
      ],

    }
  },
  methods: {
    addPeople() {}
  }
}
</script>

<style scoped>
.item-class {
  background-color: white;
  margin: 2px 0;
  line-height: 36px;
  padding: 8px;
}
.ghost {
  border: 1px blue solid;
}

.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
</style>

到此，基本上能跑起来看到效果了

3. 配置

这里面的很多配置是需要参考SortableJS的，这里主要介绍几个常用的。

• value（这个在使用的时候是以v-model的形式）
  draggable关联的数组数据，一般后面会用v-for来进行遍历展示
• list
  这个跟value的作用差不多，唯一的区别就是使用list的时候，数据的操作是使用的splice方法，使用value的 时候是无感的，不知道这里对不对，把官网的贴一下：

  The main difference is that list prop is updated by draggable component using splice method, whereas value is immutable.

• options
  配置项，里面的内容比较多，暂时先列一些常用的，后续再更新
  • group（vuedraggable提供了一个单独的配置参数，可以单独写在外面）
    • name：设置组的名称，如果你有两个draggable，需要相互拖拽，这个group的那么需要一致才可以
    • pull：true|false|["foo", "bar"]|'clone'|function，表示能够从list中移出的配置，clone为复制一个，而不是 移动，一个数组表示只能移除name在数组中的，默认的值为true
    • put：true|false|["foo", "bar"]|function，表示元素是否能被加入到list中，或者是只有给定数组中的元素才可以被添加进来
    • handle：指定一个拖拽的句柄，通常是一个class，就是当鼠标有移动到这个class的元素上时才能进行拖拽
    • animation：拖动的动画时长，在同一个draggable中有效，为0的时候表示没有动画效果
    • sort：true|false设置是否能排序，false的话就没有排序的效果，表面上看组内就是没有拖动后的结果，如果是两组的情况，默认都是放到最后一个
    • delay：定义鼠标选中列表单元可以开始拖动的延迟时间
    • disabled：控制draggable是否可用的一个开关
    • filter：定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔
    • draggable：定义哪些列表单元可以进行拖放
    • ghostClass：当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式
    • chosenClass：当选中列表单元时会给该单元增加一个class
    • forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等
    • fallbackClass：当forceFallback设置为true时，拖放过程中鼠标附着单元的样式
    • scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动
    • onChoose：列表单元被选中的回调函数
    • onUnchoose：元素未被选中的时候（从选中到未选中）
    • onStart：列表单元拖动开始的回调函数
    • onEnd：列表单元拖放结束后的回调函数
    • onAdd：列表单元添加到本列表容器的回调函数
    • onUpdate：列表单元在列表容器中的排序发生变化后的回调函数
    • onSort：列表的任何更改都会触发
    • onRemove：列表元素移到另一个列表容器的回调函数
    • onFilter：试图选中一个被filter过滤的列表单元的回调函数
    • onMove：当移动列表单元在一个列表容器中或者多个列表容器中的回调函数
    • onClone：当创建一个列表单元副本的时候的回调函数
    • onChange：拖拽元素改变位置的时候
• tag
  draggable渲染后的标签，默认是div，可以通过这里自定义

后续再更新