vuedraggable clone

vuedraggable 提供了一个 clone事件，这个事件会返回 克隆目标、来源、索引等相关信息。

<!--
 * @Description: vuedraggable
 * @Version: 0.1
 * @Autor: wangmiao
 * @Date: 2021-06-12 20:54:49
 * @LastEditors: wangmiao
 * @LastEditTime: 2021-06-12 21:31:12
-->
<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div style="padding-left: 6px">clone例子,左边往右边拖动试试看</div>
      <div class="col">
        <draggable
          v-model="arr1"
          @end="end1"
          :options="{ group: { name: 'itxst', pull: 'clone' }, sort: true }"
          animation="300"
          :move="onMove"
          :clone="cloneData"
        >
          <transition-group>
            <div
              :class="item.id == 1 ? 'item forbid' : 'item'"
              v-for="item in arr1"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <draggable
          v-model="arr2"
          @end="end2"
          group="itxst"
          animation="300"
          :move="onMove"
        >
          <transition-group>
            <div
              :class="item.id == 12 ? 'item2 forbid' : 'item2'"
              v-for="item in arr2"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import draggable from "vuedraggable";
import { newGuid } from "@/utils/commonUtil.js"
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    draggable,
  },
  data() {
    // 这里存放数据
    return {
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "www.itxst.com（不允许停靠）" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 5, name: "www.google.com" },
        { id: 4, name: "www.taobao.com（不允许拖拽）" },
      ],
      arr2: [{ id: 11, name: "常用菜单" }],
      moveId: -1,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
      cloneData(origin){
          console.log(origin,'origin')
          // clone 从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素
          // 所以我们可以重新new 拷贝一个新对象
           let data = JSON.parse(JSON.stringify(origin))
           data.id = newGuid()
           console.log(data,'data')
           return data
      },
    //左边往右边拖动时的事件
    end1(e) {
      console.log(e);
      var that = this;
      var items = this.arr2.filter(function (m) {
        return m.id == that.moveId;
      });
      //如果左边
      if (items.length < 2) return;
      this.arr2.splice(e.newDraggableIndex, 1);
    },
    //右边往左边拖动时的事件
    end2(e) {
      console.log(e);
      var that = this;
      var items = this.arr1.filter(function (m) {
        return m.id == that.moveId;
      });
      //如果左边
      if (items.length < 2) return;
      this.arr1.splice(e.newDraggableIndex, 1);
    },
    //move回调方法
    onMove(e, originalEvent) {
      this.moveId = e.relatedContext.element.id;
      //不允许停靠
      if (e.relatedContext.element.id == 1) return false;
      //不允许拖拽
      if (e.draggedContext.element.id == 4) return false;
      if (e.draggedContext.element.id == 11) return false;
      return true;
    },
  },
};
Array.prototype.filter =
  Array.prototype.filter ||
  function (func) {
    var arr = this;
    var r = [];
    for (var i = 0; i < arr.length; i++) {
      if (func(arr[i], i, arr)) {
        r.push(arr[i]);
      }
    }
    return r;
  };
</script>

<style lang='scss' scoped>
      .itxst {
          margin: 10px;
           text-align :left;
      }
      .col {
          width: 40%;
          flex: 1;
          padding: 10px;
          border: solid 1px #eee;
          border-radius: 5px;
          float: left;
      }
      .col + .col {
          margin-left: 10px;
      }
      .item {
          padding: 6px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #eee;
          background-color: #f1f1f1;
          text-align: left;
      }
      .item + .item {
          border-top: none;
          margin-top: 6px;
      }

      .item:hover {
          background-color: #fdfdfd;
          cursor: move;
      }
      .item2 {
          padding: 6px 12px;
          margin: 0px 10px 0px 10px;
          border: solid 1px #eee;
          background-color: pink;
          text-align: left;
      }
      .item2 + .item2 {
          border-top: none;
          margin-top: 6px;
      }

      .item2:hover {
           outline: solid 1px #ddd;
          cursor: move;
      }

</style>