拖动组件 vue-draggable-next 跨组件和clone问题

蒙面人2025-08-08 15:05

跨组件交互问题

问题描述：

当A，B组件把 VueDraggableNext 都封装到其内部的时候，让A,B组件可以交互，比如把A中的数据元素拖动到B组件中，但是如果按照每个组件都分别引用 VueDraggableNext 那么 A,B 组件之间分辨是两个实例，他们之间变不能交互。

解决方案：

把VueDraggableNext 组件作为一个全局引用，A,B组件共同应用这个组件的，那么就是一个组件实例。

在vue3 中

ts 复制代码

//main.ts

import { VueDraggableNext } from 'vue-draggable-next'

const app = createApp(App)
app.provide('VueDraggableNext', VueDraggableNext)

ts 复制代码

// A组件
const VueDraggableNext = inject('VueDraggableNext')

ts 复制代码

// B组件
const VueDraggableNext = inject('VueDraggableNext')

这样就可以两个组件之间进行交互。

clone模式问题

问题描述

list 中的数据是个多层嵌套的对象，每次把list中的对象拖动新的组件数组中，并没有clone对象，而是引用原对象，不然拖拽第二个组件将会和第一个组件一模一样，改变第一个组件第二个、第三个也会跟着变动。解决方案是使用clone属性函数中拦截clone数据，让其创建新对象。

TS 复制代码

<template>
  <VueDraggableNext  
    :group="{ name:'ComponentList', pull:'clone', put:true }"
    :list="list"
    :force-fallback="true"
    :fallback-class="true"
    :fallback-on-body="false"
    item-key="id"
    @clone='cloneA' // 这里获取的是个原生对象相关的
    // 这里是获取的list中的某一项,拦截处理数据后会被拖动到另一个List
     :clone="(el:any) => { 
      const  clone = deepClone(el)
      return  clone
     }"
     :animation="500"
     >
     <div v-for="(item,index) in list" :key="index"></div>
   </VueDraggableNext>
</template>