在线地址 (用梯子会更快些)

可视化页面编辑器，听起来可望不可即是吧，先来张动图观摩观摩一番！

实现这功能之前，在网上参考了很多资料，最终一无所获，五花八门的文章，都在述说着曾经的自己！

那么，这时候就需要自己去琢磨了，如何实现？

需要考虑到：

• 拖拽的实现
• 数据结构的定义
• 组件的划分
• 可维护性、扩展性

对象的引用：在这里是我感觉最酷的技巧了，来一一讲解其中的细节吧！！

拖拽实现

拖拽事件

这里使用 H5的拖拽事件 ，主要用到：

dragstart   
draggable   
dragend     
dragover    
drop        

我们来看看怎么使用这些事件：

<script>
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
}

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