Vue中使用 sortable 拖拽

1. npm 下载：

npm install sortablejs --save

2. 引入：

import Sortable from "sortablejs";

3. 创建实例

Sortable.create(节点,{配置对象})

4. 常用属性及方法应用

<template>
  <div>
    <!-- 单个列表拖拽 -->
    <h3>单个列表拖拽</h3>
    <ul ref="e1">
      <li
        v-for="n in list"
        :dataIdAttr="n.index"
        :key="n.index"
        :class="n.index==0?'disabled':'canMove'"
      >
        <span class="move">Touch</span>
        {{n.name}}
      </li>
    </ul>
    <!-- 多个列表拖拽 -->
    <h3>多个列表拖拽</h3>
    <div style="width:600px;display:flex;justify-content: space-between;">
      <ul ref="e2">
        <li v-for="n in 5" :key="n" v-text="'b' + n"></li>
      </ul>
      <ul ref="e3">
        <li v-for="n in 5" :key="n" v-text="'c' + n"></li>
      </ul>
    </div>
  </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      list: [
        { index: 0, name: "a-0" },
        { index: 1, name: "a-1" },
        { index: 2, name: "a-2" },
        { index: 3, name: "a-3" },
        { index: 4, name: "a-4" },
      ],
    };
  },
  methods: {
    // 单个列表拖拽
    sortable_1() {
      const el = this.$refs.e1;
      let sortable = Sortable.create(el, {
        animation: 150, //动画
        delay: 1000, //拖动延迟时间ms,默认0
        delayOnTouchOnly: true, //为true时，在PC端delay属性无效
        handle: ".move", //指定拖拽目标，点击此目标才可拖拽元素
        filter: ".disabled", //指定不可拖动的类名 可以是function
        draggable: ".canMove", //指定可以拖动的类名
        dataIdAttr: "dataIdAttr", //获取拖动后的数据 默认data-id(在标签设置data-id)、此例可通过sortable.toArray()获取最新排序
        dragClass: "dragClass", //设置拖拽样式类名
        ghostClass: "ghostClass", //设置拖拽停靠样式类名
        chosenClass: "chosenClass", //设置选中样式类名
        // 选中事件
        onChoose: (e) => {
          console.log("选中");
        },
        // 取消选中事件
        onUnchoose: (e) => {
          console.log("取消选中");
        },
        // 开始拖动事件
        onStart: (e) => {
          console.log("开始拖动");
        },
        // 结束拖动事件
        onEnd: (e) => {
          // 无法通过this.list获取最新排序
          console.log("结束拖动", sortable.toArray());
        },
      });
    },
    // 多个列表拖拽
    sortable_2() {
      const e2 = this.$refs.e2;
      const e3 = this.$refs.e3;
      // 第一组
      Sortable.create(e2, {
        animation: 150,
        // group: "groupName", //组名--方式一
        group: {
          //组名--方式二
          name: "groupName", //组名
          pull: "clone", //是否允许拖入当前组true/false 可以是function。值为'clone'时拖拽会在原地克隆一份
          put: () => {
            return true;
          }, //是否允许拖出当前组
        },
        sort: true, //该组内是否允许拖动（默认true，为false时，组内无法拖动，但可以拖入拖出）
        filter: (e, node) => {
          // e 事件对象
          // node 当前拖拽的节点
          return false;
        }, //指定不可拖动的类名function return true 不允许拖拽、false可拖拽
        // 新增元素事件---适用于多个组之间进行拖动
        onAdd: (e) => {
          console.log("新增元素");
        },
        // 元素位置改变事件----新增、删除元素时不会触发
        onUpdate: (e) => {
          console.log("位置更新--onUpdate_1");
        },
        // 元素位置改变事件----新增、删除元素时也会触发
        onSort: (e) => {
          console.log("位置更新--onSort_1");
        },
        // 移除事件
        onRemove: (e) => {
          console.log("移除元素");
        },
        // 拖拽过程中的事件
        onMove: (e, mousePosition) => {
          // mousePosition 鼠标位置对象
          // e.target 当前拖拽的元素
          // e.related 将被替换的节点
          // e.willInsertAfter 当前拖拽元素将被放置在原位置之前还是之后 true前 false后
          // 返回false时则取消放置
          console.log("拖拽过程中");
        },
        // 拖拽位置改变事件---不需要松手就可触发(跨组时需要在另一个组也监听此事件)
        onChange: (e) => {
          console.log("拖拽位置改变--onChange_1");
        },
        // 克隆事件
        onClone: (e) => {
          // e.item 拖拽的节点（拖拽成功之后在目标位置）
          // e.clone 克隆的节点（拖拽成功之后在原位置）
          console.log("克隆");
        },
      });
      // 第二组
      Sortable.create(e3, {
        animation: 150,
        group: "groupName",
        onUpdate: (e) => {
          console.log("位置更新--onUpdate_2");
        },
        onSort: (e) => {
          console.log("位置更新--onSort_2");
        },
        onChange: (e) => {
          console.log("拖拽位置改变--onChange_2");
        },
      });
    },
  },
  computed: {},
  mounted() {
    // 单个列表拖拽
    this.sortable_1();
    // 多个列表拖拽
    this.sortable_2();
  },
  components: {},
};
</script>
<style lang='scss' scoped>
ul {
  width: 300px;
  li {
    cursor: pointer;
    line-height: 40px;
    border: 1px solid #ccc;
  }
}
.ghostClass {
  background: blue;
  color: #fff;
}
.dragClass {
  background: red;
  color: #fff;
}
.chosenClass {
  border-color: green;
}
</style>