先看成果：（样式业务简陋请见谅！）
如图：左侧按钮/div/span/拖拽到右侧生成组件，右侧组件之间也可以互相碰撞替换；
左右都是数组，拖拽的过程相当于两个数组数据的迁移
本功能使用得draggable插件，参数配置请跳转查看！
下面开始分享实现过程：
1、下载draggable
npm install vuedraggable --save
2、引入draggable
import draggable from 'vuedraggable'// 注册components: { draggable }
3、 左侧代码实现
<draggablev-model="dragNode"tag="ul"v-bind="{group: { name: 'people', pull: 'clone', put: false },sort: false,animation: 0,filter: '.undraggable'}">// 循环生成按钮<button v-for="(component,index) in dragNode" :key="index" class="btn-grad-03">{{ component.title }}</button></draggable>
js逻辑部分
// 三个测试基础组件（实际开发可替换成自己的业务）import component1 from './component1'import component2 from './component2'import component3 from './component3'components: {component1,component2,component3},// 左侧组件名称列表dragNode: [{name: 'component1',title: '文字组件'}, {name: 'component2',title: '表格组件'}, {name: 'component3',title: '环形进度条'}]
4、右侧代码实现
<draggablev-model="dragData"style="width: 100%;height: 100%;"v-bind="{group: 'people',animation: 300}"><el-col v-for="(item, index) in dragData" :key="index" :span="12" style="margin-bottom: 30px;"><div class="drag-content">// 关闭组件<i class="el-icon-close close-icon" @click="handleCloseComponent(index)" /><div>{{ item.title }}</div>// 循环生成动态组件 :is<component :is="item.name" class="mt" /></div></el-col></draggable>
data
// 拖拽后的数据dragData: [],
methods
// 删除关闭组件（删除数据）handleCloseComponent(index) {this.dragData.splice(index, 1)};
以上就是该功能的具体实现，有需要的小伙伴可以借鉴；
这种扩展性很高；
1、做过表单设计器，首页完全拖拽布局，生成json存储的数据库，根据json回显渲染页面，实现个性化首页（左侧组件名、中间容器、右侧数据样式设置）
2、做过大屏幕模块定制化，不同人员可设置不同右侧组件布局
也可以使用多列拖拽容器等
因效果设计公司业务。暂不展示
ps：如果内容对大家有帮助的话，不要吝啬你的小手，点赞支持支持博主
