VueDraggable4.x 适配 Vue3.x

适配 VueDraggable4.x , Vue3.x

组件菜单box1:
 
    


效果box2:

 

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'
    }
},

cloneMenuItem 事件对属性节点进行克隆。 handleEnd事件当从左侧拖入到box2完成时将list2数据源同步到父组件。

效果：