记录一下vuedraggable clone的坑，获取数据

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

事件名称	说明
clone	从一个数组拖拽到另外一个数组时触发的事件和add不同，clone是复制了数组元素

文档地址：点击查看

html

<draggable
      :class="{'el-row':true,'drag-area':true,'empty':components.length==0}"
      :list="components"
      @add="add"
      @end="end"
      @clone="clone"  //这里特别注意
      :group="{name: 'people',pull: 'clone',put: true}"
      :animation="150"
  >
    <ComponentRender class="col" v-for="element in components" :key="element.id" :element="element"
                     @select="selectComponent"></ComponentRender>

  </draggable>

<draggable
      :class="{'el-row':true,'drag-area':true,'empty':components.length==0}"
      :list="components"
      @add="add"
      @end="end"
      @clone="clone"  //这里特别注意
      :group="{name: 'people',pull: 'clone',put: true}"
      :animation="150"
  >
    <ComponentRender class="col" v-for="element in components" :key="element.id" :element="element"
                     @select="selectComponent"></ComponentRender>

  </draggable>

如果想获取克隆对象数据的事件，应该使用属性，而名称和clone一模一样

html

<draggable
 :list="components"
 @clone='cloneA'//这里获取的是个原生对象相关的
 :clone='cloneB' //这里是获取的list中的某一项，可以通过加工后返回></draggable>

<draggable
 :list="components"
 @clone='cloneA'//这里获取的是个原生对象相关的
 :clone='cloneB' //这里是获取的list中的某一项，可以通过加工后返回></draggable>

clone 属性事件

JavaScript

clone(origin) {

      //这一步最关键，没处理好，后面会数据混乱

      //通过转成字符串，让他变成一个新对象，不然拖拽第二个组件将会和第一个组件一模一样，改变第一个组件第二个、第三个也会跟着变动。
      const data = JSON.parse(JSON.stringify(origin))
      data.id = parseInt(new Date().getMilliseconds() + "" + Math.ceil(Math.random() * 100000)).toString(16);

      return data
    }

clone(origin) {

      //这一步最关键，没处理好，后面会数据混乱

      //通过转成字符串，让他变成一个新对象，不然拖拽第二个组件将会和第一个组件一模一样，改变第一个组件第二个、第三个也会跟着变动。
      const data = JSON.parse(JSON.stringify(origin))
      data.id = parseInt(new Date().getMilliseconds() + "" + Math.ceil(Math.random() * 100000)).toString(16);

      return data
    }

赞助商广告 🔗

记录一下vuedraggable clone的坑，获取数据 ​

记录一下vuedraggable clone的坑，获取数据