拿捏可视化编辑器

背景 最近产品提了个需求，要实现往画布拖拽图片、svg，在同类组件上松开鼠标时进行替换操作，反之进行新增。 最终效果如下： 功能分析 要实现本功能，可以简单拆解成以下几点： 要拖拽元素区域绑定鼠标事件

何为组合，我的理解为使多个独立的个体形成一个统一的整体，就好像 ‘草帽海贼团’ 就是由路飞和多名船员一起组成的。 为何需要组合 通常在可视化编辑器中，编辑区域会存在许多元素。当我们想对多个元素进行统一

一、元素拖拽 元素拖拽相对比较简单，主要就是通过监听元素的mousedown和mousemove事件，在拖拽过程中不断设置元素的left和top实现位移。 鼠标在拖动元素的时候，无非就是 上、下、左、

背景 本文分析要点 辅助线生成逻辑 辅助线显示优化 辅助线吸附逻辑 效果展示 一.辅助线生成原理 首先我们要知道，辅助线就是为了方便对齐某个元素而生成的参考线，看上图 通常我们会对一个元素的 左、中、