Sortable.js 是一款优秀且功能强大的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery，支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

Sortable.js可以实现同组内上下拖动元素，也可以实现不同组内互相拖动元素。

• 官网
• 中文文档

一、安装

npm i sortablejs -S

二、基本示例

<template>
  <el-checkbox-group ref="wrap" class="wrap" v-model="checked">
      <el-checkbox class="draggable" v-for="item in arr" :key="item" :label="item">
        {{item}}
      </el-checkbox>
  </el-checkbox-group>
</template>

<script>
import Sortable from 'sortablejs';

export default {
  data() {
    return {
      arr: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
      checked: [],
    }
  },
  mounted () {
    this.$nextTick(function() {
      this.initSortable();
    });
  },
  methods: {
    initSortable() {
      const el = this.$refs.wrap.$el;
      new Sortable(el, {
        handle: ".draggable",
        draggable: ".draggable",
        dragClass: "sortable-drag",
        onEnd: evt => {
          let {newIndex, oldIndex} = evt;
          if (newIndex === oldIndex) return;
          const _copy = [...this.arr];
          const [item] = _copy.splice(oldIndex, 1)
          _copy.splice(newIndex, 0, item)
          this.arr = _copy;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 350px;
}
.draggable {
  display: inline-block;
}
.sortable-drag {
  background-color: rgb(217, 244, 235);
  opacity: 0.2;
}
</style>

三、常用配置

const config = {
  //一个网页存在多个分组时设置，组名相同的组之间元素可以相互拖拽
  group: "name",
  //2种group写法选一种就可以了
  group: { 
    name: 'name',
    pull: 'clone', //克隆元素
  },
  //是否允许元素内部排序，如果为false当有多个排序组时,多个组之间可以拖拽，本身不能拖拽（默认true）
  sort: true,
  //是否禁用拖拽和排序
  disabled: false,
  //动画效果持续时间（不设置或0都没有过渡效果）
  animation: 150,
  //点击指定class类的元素才能拖拽（比如点击元素内的图标才能拖拽元素，可以给图标设置my-handle class）
  //class可以定义在元素本身上，也可以定义在子元素上
  handle: ".my-handle",
  // class为ignore的元素不能拖动
  filter: ".ignore",
  //含有item 类的元素可以被拖拽（class只能定义在元素本身上）
  draggable: ".item",
  //指定获取拖动后排序的属性
  dataIdAttr: 'data-id',
  //给停靠位置添加的class（可以给这个class定义样式）
  ghostClass: "ghost",
  //选中元素添加的类（包括悬浮的元素和停靠位置的元素）
  chosenClass: "chosen",
  //拖拽对象移动时添加的类
  dragClass: "drag",
  //禁用html5原生拖拽
  forceFallback: false,
  ...

  //克隆事件
  onClone: function (evt) {
      //被克隆的对象（被移到另外地方的那个元素）
      var origEl = evt.item;
      //克隆后的对象（还是在原来位置的元素）
      var cloneEl = evt.clone;
      cloneEl.innerHTML = "clone出的元素";
  },
  ...
}