Vue-draggable 实现页面模板自动化

2024-05-03 18:34:12

支持组件：

广告轮播，导航菜单，导航魔方，分割线，商品搜索条，商品列表，店铺列表，代金券列表，活动列表，文章列表，视频列表，相册列表，直播列表。

功能说明：

1.从左侧拖入组件到中间容器内。左侧组件不变，只是clone节点到中间容器。

2. 中间容器不可再拖入左侧。中间容器各个部件可以在容器内上下拖动进行排序。

3. 支持同类型多组件。从左侧拖入相同组件的时候，会先从中间容器拷贝同类型的部件。重用样式。每个部件id值唯一。

4. 中间容器选中某个部件，在选中的部件右上角显示删除按钮。右边显示对应的部件属性。

5. 修改右边对应的部件属性，中间容器对应的部件可实时显示效果。

6. 右边部件的属性根据每个部件的类型不同而决定。

7. 中间容器下方底部可设置大容器的页面背景颜色。

9. 最后提交保存全部部件的属性。这样就完成了一个页面模板。下次页面模板编辑的时候，页面进入直接显示实时效果。

功能流程技术文档https://www.littlewhale.xyz/2021/11/07/vueDraggable/点击此链接查看详细代码设计。

Vue3.x , vue-draggable 4.x 适配 https://blog.csdn.net/qgy1994/article/details/121194062https://blog.csdn.net/qgy1994/article/details/121194062

Vue-draggable 实现页面模板自动化相关推荐

Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
router vue 多个路径_多个vue子路由文件自动化合并的方法，
多个vue子路由文件自动化合并的方法, 1. 目录结构废话不多说,直接上图. 目录结构,如下图所示 2. 代码编写位置在router目录下面的index.js文件中写入以下代码 import Vu ...
Vue.Draggable拖拽功能的配置和使用方法
使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedragg ...
vue.draggable实现元素拖动效果
找了很久的使用文档使用文档,有实例还有代码演示有几个需要拖动的列表就用几个数组就要有几个配置选项. 但是现在控制台会报警告,应该是废弃了这种使用方法,但我没改出来,有会使用的可以在评论区指导一下吗 ...
Vue.Draggable 文档总结
Vue.Draggable学习总结 Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以j ...
SortableJS/Vue.Draggable
Vue 组件 (Vue.js 2.0) 或指令 (Vue.js 1.0) 允许拖放和与视图模型数组同步. 基于并提供Sortable.js的所有功能对于 Vue 3 见vue.draggable.n ...
Vue.Draggable 心得
Vue.Draggable 为基于 Sortable.js 的 Vue 组件,用以实现拖拽功能. 一般用法 Vue.Draggable 当界面拖动的时候 data 也同时在变化 Vue.Draggab ...
vue draggable学习
vue draggable学习 1.安装 2.常用例子 2.1 单列拖拽 2.2 表格拖拽 2.3 多列拖拽 3. 属性列表 3.1 group拖拽分组 3.1.1 group属性 3.1.1.1 字 ...
Vue.Draggable使用
Vue.Draggable Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件.支持移动设备.拖拽和选择文本.智能滚动,可以在不同列表间拖拽.不依赖jQuery为基 ...
vue.draggable拖拽生成课程表
需求根据数据源提供的科目及教师信息,拖拽至空白课表内,生成一份课表. 需求分析数据源首先科目有多个,教师也有多个.数据源部分做一个切换选择科目的效果,选取科目后,提供科目及授课人名字. 课表课 ...

最新文章

热门文章