• 售前

  • 售后

热门帖子
入门百科

Vue 实现可视化拖拽页面编辑器

[复制链接]
无人岛屿颈 显示全部楼层 发表于 2021-10-25 20:43:30 |阅读模式 打印 上一主题 下一主题
目次


  • 拖拽实现

    • 拖拽事件
    • 拖拽开始
    • 在开释地区中移动
    • 边界处置惩罚、角度盘算
    • 拖拽竣事
    • 内容块拖拽实现

  • 组件划分
  • 数据布局的界说
  • 编辑组件的传值
  • 图片上传
  • 最后总结
在线地址 (用梯子会更快些)
可视化页面编辑器,听起来可望不可即是吧,先来张动图观摩观摩一番!

实现这功能之前,在网上参考了很多资料,最终一无所获,五花八门的文章,都在述说着曾经的自己!
那么,这时候就必要自己去琢磨了,如何实现?
必要考虑到:
      
  • 拖拽的实现  
  • 数据布局的界说  
  • 组件的划分  
  • 可维护性、扩展性
对象的引用:在这里是我感觉最酷的技巧了,来逐一解说其中的细节吧!!

拖拽实现



拖拽事件

这里使用 H5的拖拽事件 ,主要用到:
  1. dragstart // 开始拖拽一个元素时触发
  2. draggable // 指定可被拖拽的元素
  3. dragend  // 当拖拽操作结束时触发
  4. dragover // 当拖拽元素在可释放目标上移动时触发
  5. drop  // 当拖拽元素在可释放目标上被释放时触发
复制代码
我们来看看怎么使用这些事件:
  1. <!-- 拖拽元素列表数据 -->
  2. <script>
  3. // com 为对应的视图组件,在释放区域显示
  4. typeList: {
  5. banner: {
  6.   name: '轮播图',
  7.   icon: 'el-icon-picture',
  8.   com: Banner
  9. },
  10. product: {
  11.   name: '商品',
  12.   icon: 'el-icon-s-goods',
  13.   com: Product
  14. },
  15. images: {
  16.   name: '图片',
  17.   icon: 'el-icon-picture',
  18.   com: Images
  19. },
  20. }
  21. </script>
  22. <!-- 拖拽元素 -->
  23. <ul
  24. @dragstart="dragStart"
  25. @dragend="dragEnd"
  26. >
  27. <li
  28.   v-for="(val, key, index) in typeList"
  29.   draggable
  30.   :data-type="key"
  31.   :key="index + 1"
  32. >
  33.   <span :class="val.icon"></span>
  34.   <p>{{val.name}}</p>
  35. </li>
  36. </ul>
  37. <!-- 释放区域 -->
  38. <div
  39. class="view-content"
  40. @drop="drog"
  41. @dragover="dragOver"
  42. >
  43. </div>
复制代码


拖拽开始


界说一个变量type,用于触发拖拽事件开始的时候,确定当前拖拽元素是哪种范例,比如:产品、广告图...
  1. // 拖拽类型
  2. dragStart(e) {
  3. this.type = e.target.dataset.type
  4. }
复制代码
确定范例后,再进入下一步的开释地区

在开释地区中移动


移动的过程中,必要根据鼠标位置实时盘算拖拽元素的位置,具体可往下翻预览动图结果!
  1. // 'view-content': 外层盒子的class,直接 push
  2. // 'item': 盒子内部的元素,需计算位置,进行变换操作
  3. dragOver() {
  4. let className = e.target.className
  5. let name = className !== 'view-content' ? 'item' : 'view-content'
  6. // 组件的默认数据
  7. const defaultData = {
  8.   type: this.type, // 组件类型
  9.   status: 2,   // 默认状态
  10.   data: [],   // 基本数据
  11.   options: {}   // 其他操作
  12. }
  13. if (name == 'view-content') {
  14.   //...
  15. } else if (name == 'item') {
  16.   //...
  17. }
  18. }
复制代码
边界处置惩罚、角度盘算


核心变量:
      
  • isPush:拖拽元素是否已push到页面数据中  
  • index:拖拽元素最终的索引值  
  • curIndex:鼠标所在位置的元素的索引值  
  • direction:鼠标所在元素的上/下部分
  1. name=='view-content'
复制代码
,阐明拖拽元素处于外层且空白的可开释地区,如果未添加状态,直接push即可
  1. if (name == 'view-content') {
  2. if (!this.isPush) {
  3.   this.index = this.view.length
  4.   this.isPush = true
  5.   this.view.push(defaultData)
  6. }
  7. }
复制代码
当 name=='item',也就是在已有元素的上方,则必要盘算位置,上/下方,添加 or 移动
  1. if (name == 'item') {
  2. let target = e.target
  3. let [ y, h, curIndex ] = [ e.offsetY, target.offsetHeight, target.dataset.index ]
  4. let direction = y < (h / 2) // 计算鼠标处于当前元素的位置,来决定拖拽元素的上/下
  5. if (!this.isPush) {
  6.   // first
  7.   if (direction) {
  8.    if (curIndex == 0) {
  9.     this.view.unshift(defaultData)
  10.    } else {
  11.     this.view.splice(curIndex, 0, defaultData)
  12.    }
  13.   } else {
  14.    curIndex = +curIndex + 1
  15.    this.view.splice(curIndex, 0, defaultData)
  16.   }
  17. } else {
  18.   // Moving
  19.   if (direction) {
  20.    var i = curIndex == 0 ? 0 : curIndex - 1
  21.    var result = this.view[i]['status'] == 2
  22.   } else {
  23.    var i = +curIndex + 1
  24.    var result = this.view.length > i && this.view[i]['status'] == 2
  25.   }
  26.   
  27.   // 拖拽元素是否需变换位置
  28.   if (result) return
  29.   const temp = this.view.splice(this.index, 1)
  30.   this.view.splice(curIndex, 0, temp[0])
  31. }
  32. this.index = curIndex // 拖拽元素位置
  33. this.isPush = true  // 进入则push,即true
  34. }
复制代码
      
  • first:未 push,则根据当前 index 和 direction 来决定拖拽元素的位置  
  • Moving:已 push 且移动状态,根据当前 index 和 direction 来找出对应值的状态,是否为拖拽元素,是则 return,否则变更位置
总结一下:获取当前鼠标所在的元素索引,再盘算鼠标是在元素的上半部分照旧下半部分,以此推断出拖拽元素的位置!!!

小标题:
上面的 name=='item',Event 事件必要制止默认事件,避免 target 为内层元素,导致无法盘算位置,但是只用事件制止在这里行不通,也不知道为啥,必要把 .item 的全部子元素加上 pointer-events: none 的属性才行!
  1. e.preventDefault()
  2. e.stopPropagation()
  3. .item div{
  4. pointer-events: none;
  5. }
复制代码
拖拽竣事


即松开鼠标、或离开开释地区,则恢复默认状态。
这里的status有什么作用呢
      
  • 上方的盘算规则,用于判断元素是否为拖拽元素。  
  • 页面的显示方式,拖拽的时候只显示组件名,开释之后才恢复正常显示内容。
  1. // 结束拖拽
  2. dragEnd(e) {
  3. this.$delete(this.view[this.index], 'status')
  4. this.isPush = false
  5. this.type = null
  6. },
  7. // 已放置到指定位置
  8. drog(e) {
  9. e.preventDefault()
  10. e.stopPropagation()
  11. this.dragEnd()
  12. },
复制代码
内容块拖拽实现


因时间关系,这里偷懒了,使用了一个较为完善的列表拖拽插件 Vue.Draggable (star 14.2k)
研究了一会儿,其逻辑和上方实现的拖拽有一定接洽,具体实现方法大同小异,相信有了上面的实战案例,你也就能做出来了!
要不,你动手试试?
可以根据Vue.Draggable的使用方式,来实现一个拖拽组件,具领会用到(drag、slot、DOM)等操作
(后面偶尔间,我再返来封装一个)

组件划分


中间视图组件,右边编辑组件,为一套一套的,果然是一套一套的,不愧是有一套一套的!
page=>index 则管理着整个页面的内容
  1. .
  2. ├── components
  3. | ├── Edit   ## 右边编辑
  4. | | ├── Info  # 基本信息
  5. | | ├── Image  # 广告图
  6. | | ├── Product # 商品
  7. | | └── Index  # 管理编辑组件的信息
  8. | └── View   ## 中间视图
  9. | | ├── Banner  # 轮播图
  10. | | ├── Images  # 广告图
  11. | | └── Product # 产品列表
  12. └── page
  13. └── index   ## 主页面
复制代码

想要实现预览页面的结果,直接使用 components=>View 下面的组件即可,与 page=>index 使用方法一致,无需过多修改!

数据布局的界说


实现一个美丽且具有扩展性的功能,那么界说一个符合条件的数据布局是必不可少的!与此同时也能决定你的代码质量!
固然,照旧得由自身所学和逻辑思维来决定!
这里最为亮眼的处置惩罚方式:借用对象的关系,使得组件之间的传值,只需单向传输一次!
  1. view: [
  2. {
  3.   type: 'info',
  4.   title: '页面标题',
  5.   remarks: '页面备注',
  6.   backgroundColor: 'red'
  7. },
  8. {
  9.   type: 'banner',
  10.   data: [
  11.    { url: '1.jpg', name: '轮播图1', link: 'https://轮播图跳转地址.cn' },
  12.    { url: '2.jpg', name: '轮播图2', link: 'https://轮播图跳转地址.cn' }
  13.   ]
  14. },
  15. {
  16.   type: 'images',
  17.   data: [
  18.    { url: '1.jpg', name: '广告图1', link: 'https://广告图跳转地址.cn' },
  19.    { url: '2.jpg', name: '广告图2', link: 'https://广告图跳转地址.cn' }
  20.   ]
  21. },
  22. {
  23.   type: 'product',
  24.   data: [
  25.    { id: '1', name: '商品1', image: '1.jpg' },
  26.    { id: '2', name: '商品2', image: '2.jpg' }
  27.   ],
  28.   options: {
  29.    originalPrice: true, // 划线价
  30.    goodRatio: true,  // 好评率
  31.    volumeStr: false,  // 销量数
  32.   }
  33. }
  34. ]
复制代码
就是一个数组,数组的item代表着一个模块
      
  • type:模块范例  
  • data:根本信息  
  • options:其他操作
....可参考原有组件模块,按照需求去自行扩展等操作

编辑组件的传值


选择视图组件的时候,把view里面指定的item对象作为参数传递给编辑组件!
对象是指向同一个内存地址的,存在着一种引用关系,只需修改一次即可实现多方位的数据更新!
  1. <section class="r">
  2. <EditForm
  3.   :data="props"
  4.   v-if="isRight"
  5. ></EditForm>
  6. </section>
  7. <script>
  8. // 切换视图组件
  9. selectType(index) {
  10. this.isRight = false
  11. this.props = this.view[index]
  12. this.$nextTick(() => this.isRight = true)
  13. }
  14. </script>
复制代码
图片上传


刚好上面有图片上传组件,这里分享一下我的使用技巧!!
使用 Element-ui 自带上传组件的朋友,看过来(敲黑板)
我们先来实现一个简约版的:
  1. <!-- 禁用所有默认方法 -->
  2. <el-upload
  3. :http-request="upload"
  4. :show-file-list="false"
  5. multiple
  6. action
  7. >
  8. <img :src="item.url" v-for="(item, index) in list" :key="index">
  9. </el-upload>
  10. <script>
  11. upload(params) {
  12. const file = params.file;
  13. const form = new FormData();
  14. form.append("file", file);
  15. form.append("clientType", "multipart/form-data");
  16. const index = this.imageIndex // 编辑图片的索引
  17. const data = {
  18.   url: URL.createObjectURL(file),
  19.   form
  20. }
  21. if (index !== null) {
  22.   // this.list => 图片集合
  23.   this.$set(this.list, index, data)
  24. } else {
  25.   this.list.push(data)
  26. }
  27. }
  28. </script>
复制代码
      
  • 重写上传方法  
  • 使用 URL.createObjectURL(file) 创建一个当地预览的地址  
  • 把 form 对象存起来,提交时再上传
  1. // 根据上面的代码,使用Promise实现上传功能
  2. const request = []
  3. this.list.forEach(item => {
  4. request.push(
  5.   new Promise((resolve, reject) => {
  6.    /**
  7.     * 上传接口
  8.     * 替换原 url
  9.     * 删除 form
  10.     */
  11.    imageUpload(item.form).then(res => {
  12.     item.url = res.data.url
  13.     delete item.form
  14.     resolve(res)
  15.    }).catch(err => {
  16.     reject(err)
  17.    })
  18.   })
  19. )
  20. })
  21. Promise.all(request).then(res => {
  22. // ... submit ...
  23. })
复制代码
等到最后一步提交数据的时候,再上传全部的图片,上传完成之后再去调用提交数据的接口!!
在有表单多数据提交的场景下,这才是最正确的做法!

最后总结


其实并不复杂,重点在于数据布局的定型、组件交互的处置惩罚、逻辑方式等规划,只要这一步核心的点实现了。
其他的,例如新增组件、新增操作等等扩展性的操作,剩下的标题已不再是标题!
这只能算是一个简版,可按照需求,去优化、去琢磨、去完善,吸取成为自己的知识!
至少我已经满足了工作上的需求了,哇哈哈哈哈哈~~~
更多的细节,接待查察源码,Github 地址献上,感谢您的 star,我是不吃茶的李白。
以上就是Vue 实现可视化拖拽页面编辑器的具体内容,更多关于Vue 可视化拖拽页面编辑器的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作