先看成果：（样式业务简陋请见谅！）

如图：左侧按钮/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：如果内容对大家有帮助的话，不要吝啬你的小手，点赞支持支持博主

vue+vuedraggable 实现文字/按钮/div拖拽组件详解相关推荐

Android--Launcher拖拽事件详解【androidICS4.0--Launcher系列二】
AndroidICS4.0版本的launcher拖拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一直 ...
HTML5中新增的文件API和拖拽API详解
文件API 在HTML5之前的,从网页上传文件一次只能上传一个文件,而且也无法对要上传的文件做更深一步的操作. HTML5提供了一个系列关于文件操在的API,通过使用这些API,对于从Web页面访问本 ...
vue.js实战第一篇第七章组件详解_组件通信
正向数据传递props <div id="app"><my-component message="来自父组件的数据"></my-c ...
vue可视化拖拽生成工具_GitHub - 1260215278/dragUI: 基于vuedraggable.js + uni 的可视化拖拽编程，自动生成项目，自动生成代码，自行导入第三方组件...
dragUI 用于UNI可拖拽可视化编程在线演示效果图基于快速开始参考uni官网安装普通uni项目(运行uni-app)运行到浏览器另需要手动下载包npm install 项目目录 col ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
VUE 拖拽组件 vue.draggable
中文文档 https://www.itxst.com/vue-draggable/tutorial.html 安装 npm i -S vuedraggable 属性属性名称说明 group :gr ...
自己封装的vue拖拽组件
自己封装的vue拖拽组件使用Vue.Draggable实现 Vue.Draggable的基础使用方法可以看看这个哥们的https://blog.csdn.net/zjiang1994/article ...
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
Vue 实现拖拽模块(三)自定义拖拽组件的样式
上文介绍了自定义拖拽组件位置的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue 自定义拖拽组件的样式,具体 ...

vue+vuedraggable 实现文字/按钮/div拖拽组件详解

先看成果：（样式业务简陋请见谅！）

1、下载draggable

2、引入 draggable

3、左侧代码实现

4、右侧代码实现

vue+vuedraggable 实现文字/按钮/div拖拽组件详解相关推荐

最新文章

热门文章

vue+vuedraggable 实现文字/按钮/div拖拽组件详解

先看成果：（样式业务简陋请见谅！）

1、下载draggable

2、引入 draggable

3、 左侧代码实现

4、右侧代码实现

vue+vuedraggable 实现文字/按钮/div拖拽组件详解相关推荐

最新文章

热门文章

3、左侧代码实现