建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…

公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为了提高运营的工作效率，减少开发成本，基于此开发一个活动可视化搭建项目，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线，在此做一个小小的总结。