Vue实现可视化拖拽页⾯编辑器
⽬录
拖拽实现
拖拽事件
拖拽开始
在释放区域中移动
边界处理、⾓度计算
拖拽结束
内容块拖拽实现
组件划分
数据结构的定义
编辑组件的传值
图⽚上传
最后总结
(⽤梯⼦会更快些)
可视化页⾯编辑器，听起来可望不可即是吧，先来张动图观摩观摩⼀番！
实现这功能之前，在⽹上参考了很多资料，最终⼀⽆所获，五花⼋门的⽂章，都在述说着曾经的⾃⼰！那么，这时候就需要⾃⼰去琢磨了，如何实现？
需要考虑到：
国二考试时间
拖拽的实现
数据结构的定义
组件的划分
可维护性、扩展性
对象的引⽤：在这⾥是我感觉最酷的技巧了，来⼀⼀讲解其中的细节吧！！
拖拽实现
拖拽事件
这⾥使⽤ H5的拖拽事件，主要⽤到：
dragstart // 开始拖拽⼀个元素时触发
draggable // 指定可被拖拽的元素
dragend // 当拖拽操作结束时触发
dragover // 当拖拽元素在可释放⽬标上移动时触发
drop // 当拖拽元素在可释放⽬标上被释放时触发
我们来看看怎么使⽤这些事件：
<!-- 拖拽元素列表数据 -->
彝族美女
<script>
// com 为对应的视图组件，在释放区域显⽰
typeList: {
banner: {
name: '轮播图',
icon: 'el-icon-picture',
com: Banner
},
product: {
name: '商品',
icon: 'el-icon-s-goods',
com: Product
},
images: {
name: '图⽚',
icon: 'el-icon-picture',
com: Images
},
}
</script>
<!-- 拖拽元素 -->餐厅售卖
<ul
@dragstart="dragStart"
@dragend="dragEnd"
>
<li
v-for="(val, key, index) in typeList"
draggable
:data-type="key"
人体名模
:key="index + 1"
>
<span :class="val.icon"></span>
<p>{{val.name}}</p>
</li>
</ul>
<!-- 释放区域 -->
<div
class="view-content"
@drop="drog"
@dragover="dragOver"
>
</div>
拖拽开始
定义⼀个变量type，⽤于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，⽐如：产品、⼴告图... // 拖拽类型
dragStart(e) {
}
确定类型后，再进⼊下⼀步的释放区域
在释放区域中移动
移动的过程中，需要根据⿏标位置实时计算拖拽元素的位置，具体可往下翻预览动图效果！
// 'view-content': 外层盒⼦的class，直接 push
// 'item': 盒⼦内部的元素，需计算位置，进⾏变换操作
dragOver() {
let className = e.target.className
let name = className !== 'view-content' ? 'item' : 'view-content'
/
/ 组件的默认数据
const defaultData = {
type: pe, // 组件类型
status: 2, // 默认状态
data: [], // 基本数据
options: {} // 其他操作
}
if (name == 'view-content') {
//...
} el if (name == 'item') {
//...
}
}
边界处理、⾓度计算
核⼼变量：
isPush：拖拽元素是否已push到页⾯数据中
index：拖拽元素最终的索引值
curIndex：⿏标所在位置的元素的索引值
direction：⿏标所在元素的上/下部分
当name=='view-content'，说明拖拽元素处于外层且空⽩的可释放区域，如果未添加状态，直接push即可树的画
if (name == 'view-content') {
if (!this.isPush) {
this.index = this.view.length
this.isPush = true
this.view.push(defaultData)
}
}
当 name=='item'，也就是在已有元素的上⽅，则需要计算位置，上/下⽅，添加 or 移动
if (name == 'item') {
let target = e.target
let [ y, h, curIndex ] = [ e.offtY, target.offtHeight, target.datat.index ]
let direction = y < (h / 2) // 计算⿏标处于当前元素的位置，来决定拖拽元素的上/下
if (!this.isPush) {
/
/ first
if (direction) {
if (curIndex == 0) {
this.view.unshift(defaultData)
} el {
this.view.splice(curIndex, 0, defaultData)
}
} el {
curIndex = +curIndex + 1
this.view.splice(curIndex, 0, defaultData)
}
} el {
// Moving
if (direction) {
var i = curIndex == 0 ? 0 : curIndex - 1
var result = this.view[i]['status'] == 2
} el {
var i = +curIndex + 1
var result = this.view.length > i && this.view[i]['status'] == 2
}
// 拖拽元素是否需变换位置
if (result) return
const temp = this.view.splice(this.index, 1)
this.view.splice(curIndex, 0, temp[0])
}
this.index = curIndex // 拖拽元素位置
余秋雨的散文
this.isPush = true // 进⼊则push，即true
}
first：未 push，则根据当前 index 和 direction 来决定拖拽元素的位置
Moving：已 push 且移动状态，根据当前 index 和 direction 来找出对应值的状态，是否为拖拽元素，是则 return，否则变换位置
总结⼀下：获取当前⿏标所在的元素索引，再计算⿏标是在元素的上半部分还是下半部分，以此推断出拖拽元素的位置⼩问题：
上⾯的 name=='item'，Event 事件需要阻⽌默认事件，避免 target 为内层元素，导致⽆法计算位置，
但是只⽤事件阻⽌在这⾥⾏不通，也不知道为啥，需要把 .item 的所有⼦元素加上 pointer-events: none 的属性才⾏！
e.preventDefault()
e.stopPropagation()
.item div{
pointer-events: none;
}
梦见建房拖拽结束
即松开⿏标、或离开释放区域，则恢复默认状态。
这⾥的status有什么作⽤呢
1. 上⽅的计算规则，⽤于判断元素是否为拖拽元素。
2. 页⾯的显⽰⽅式，拖拽的时候只显⽰组件名，释放之后才恢复正常显⽰内容。
// 结束拖拽
dragEnd(e) {
this.$delete(this.view[this.index], 'status')
this.isPush = fal
},
// 已放置到指定位置
drog(e) {
e.preventDefault()
e.stopPropagation()
this.dragEnd()
},
内容块拖拽实现
因时间关系，这⾥偷懒了，使⽤了⼀个较为完美的列表拖拽插件 Vue.Draggable (star 14.2k)
研究了⼀会⼉，其逻辑和上⽅实现的拖拽有⼀定联系，具体实现⽅法⼤同⼩异，相信有了上⾯的实战案例，你也就能做出来了！
要不，你动⼿试试？
可以根据Vue.Draggable的使⽤⽅式，来实现⼀个拖拽组件，具体会⽤到（drag、slot、DOM）等操作
（后⾯有时间，我再回来封装⼀个）
组件划分
中间视图组件，右边编辑组件，为⼀套⼀套的，果然是⼀套⼀套的，不愧是有⼀套⼀套的！
page=>index 则管理着整个页⾯的内容
.
├── components
| ├── Edit ## 右边编辑
| | ├── Info # 基本信息
| | ├── Image # ⼴告图
| | ├── Product # 商品
| | └── Index # 管理编辑组件的信息
| └── View ## 中间视图
| | ├── Banner # 轮播图
| | ├── Images # ⼴告图
| | └── Product # 产品列表
└── page
└── index ## 主页⾯
想要实现预览页⾯的效果，直接使⽤ components=>View 下⾯的组件即可，与 page=>index 使⽤⽅法⼀致，⽆需过多修改！数据结构的定义
实现⼀个鲜艳且具有扩展性的功能，那么定义⼀个符合条件的数据结构是必不可少的！与此同时也能决定你的代码质量！
当然，还是得由⾃⾝所学和逻辑思维来决定！
这⾥最为亮眼的处理⽅式：借⽤对象的关系，使得组件之间的传值，只需单向传输⼀次！
view: [
{
type: 'info',
title: '页⾯标题',
remarks: '页⾯备注',
backgroundColor: 'red'
},
{
type: 'banner',
data: [
{ url: '1.jpg', name: '轮播图1', link: '轮播图跳转地址' },
{ url: '2.jpg', name: '轮播图2', link: '轮播图跳转地址' }
]
},
{
type: 'images',
data: [
{ url: '1.jpg', name: '⼴告图1', link: '⼴告图跳转地址' },
{ url: '2.jpg', name: '⼴告图2', link: '⼴告图跳转地址' }
]
},
{
type: 'product',
人生的data: [
{ id: '1', name: '商品1', image: '1.jpg' },
{ id: '2', name: '商品2', image: '2.jpg' }
],
options: {
originalPrice: true, // 划线价
goodRatio: true, // 好评率
volumeStr: fal, // 销量数
}
}
]
就是⼀个数组，数组的item代表着⼀个模块
type：模块类型
data：基本信息
options：其他操作
.
...可参考原有组件模块，按照需求去⾃⾏扩展等操作
编辑组件的传值
选择视图组件的时候，把view⾥⾯指定的item对象作为参数传递给编辑组件！
对象是指向同⼀个内存地址的，存在着⼀种引⽤关系，只需修改⼀次即可实现多⽅位的数据更新！<ction class="r">
<EditForm
:data="props"
v-if="isRight"
></EditForm>
</ction>
<script>
// 切换视图组件
lectType(index) {
this.isRight = fal
this.props = this.view[index]
this.$nextTick(() => this.isRight = true)
}
</script>
图⽚上传
刚好上⾯有图⽚上传组件，这⾥分享⼀下我的使⽤技巧！！
使⽤ Element-ui ⾃带上传组件的朋友，看过来（敲⿊板）
我们先来实现⼀个简约版的：
<!-- 禁⽤所有默认⽅法 -->
<el-upload
:http-request="upload"
:show-file-list="fal"
multiple
action
>
<img :src="item.url" v-for="(item, index) in list" :key="index">
</el-upload>
<script>
upload(params) {
