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