VueDraggable4.x vue3 适配

VueDraggable4.x 适配 

组件菜单box1:
 <draggable class="drop-box1"  animation="200" v-model = "list1" item-key="typeId" :class="dropConClass.left" :sort="false" :group="options1" :clone="cloneMenuItem"   @end="handleEnd($event, 'left')" >
    <template #item="{ element }">
        <el-card class="drag-item mpComponmentItem">{{element.typeText}}</el-card>
    </template>
</draggable>
效果box2:
<draggable class="drop-box2" v-model="modelValue" item-key="mpItemId" :class="dropConClass.right"   :style="{background: mpContainerBgColor || ''}"  group = 'drag_list'  @end="handleEnd($event, 'right')" >
 <template #item="{ element }">
     <div class="drag-list-item">
         <slot name="right" :itemRight="element"></slot>
     </div>
 </template>
</draggable>

box1对菜单进行clone， box2 绑定v-model， list2发生变化。在拖入结束事件@end中需要同步更新到外界父容器。 

  emits: ['update:modelValue','mpContainerItemAdd','mpContainerBgColorChange'],
   props: {
    modelValue: Array,
    list1: {
      type: Array,
      required: true
    },
    dropConClass: {
      type: Object,
      default: () => ({})
    },
    mpContainerBgColor:{  //小程序背景色
       type: String,
       default:'#666666'
    },
   },
data () {
    return {
      options1: {name: 'drag_list',pull:'clone',put:false}, //clone表示赋值，左侧无需删除节点。
      containerBgColor:'#ffffff'
    }
},

效果：

如有需要源码，请联系作者。

SCUI主题模板，Vue3.x , Vue-draggable 4.x 

https://littlewhale.xyz/2021/11/07/vue/vueDraggable/https://littlewhale.xyz/2021/11/07/vue/vueDraggable/

源码： GitHub - GaoYingQiu/Vue-Draggable-AppTemplate: vue拖拉拽完成app组件模板布局,from 邱高颖