手把手带你写 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) {
    this.type = e.target.dataset.type
}
复制代码

确定类型后，再进入下一步的释放区域

在释放区域中移动

移动的过程中，需要根据鼠标位置实时计算拖拽元素的位置，具体可往下翻预览动图效果