VueDraggable4.x vue3 适配

置顶

高颖同学

已于 2023-04-21 09:23:25 修改

阅读量2.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue.js vueDraggable Vue3 slot sync

于 2021-11-07 17:26:36 首次发布

本文链接：https://blog.youkuaiyun.com/qgy1994/article/details/121194062

本文介绍了如何在Vue3项目中适配VueDraggable 4.x，包括box1的菜单克隆和box2的v-model绑定，以及在拖放结束事件中同步更新外部父组件的数据。提供了SCUI主题模板和Vue-draggable 4.x的使用示例链接，以及GitHub上的源码地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中需要同步更新到外界父容器。