.rel{位置：相对;}.abs{位置：绝对;}.dom-box{宽度：1000px；高度：1000px;}.dom-item{.item-abs-top,.item-abs-bottom{高度：20px;宽度：20px；文本对齐：居中；行高：20px；背景：#fff；边框：1px实心#ddd；显示：无；游标：指针；}.item-abs-top{右：0；顶部：-20px；}.item-abs-bottom{左：50%；左边距：-10px；底部：-20px；}&:hover{.item-abs-top,.item-abs-bottom{显示：块；}}.dom-item-cont{填充：10px；背景：#f2f6fa；边框：1px实心#eee；宽度：120px；高度：60px；文本对齐：居中；溢出：隐藏；行高：20px；游标：指针；p{保证金：0;}}}.editor-mask{位置：固定；左：0；顶部：0；右：0；底部：0；z-指数：999；游标：指针；&.move{光标：移动；}}.ml-10{margin-left:10px;}前言为什么要写这个？需求是需要一个可拖动的流程图绘制功能，如图：实现方式是用canvas画线，其他元素用html实现。重点是三阶贝塞尔曲线函数bezierCurveTo。代码分析1.获取数据：list=[{id:1,pid:0,title:'1',name:'1',},{id:6,pid:5,title:'6',name:'6',},{id:5,pid:1,title:'5',name:'5',},{id:3,pid:1,title:'3',name:'3',}]通过id和pid进行数据关联。2、数据分析：遍历数据，计算出每个数据元素的级别level和元素在层次结构中的序号levelIndex，将每个元素的父元素存储在元素pele中。3、通过层级level可以计算出距离元素顶部的距离y，通过层级索引levelIndex可以计算出距离元素左侧的距离x，位置pos=[x,y]可以获取元素的位置以在页面上定位元素。4.调用bezierCurveTo通过元素的pos在画布上绘制一条贝塞尔曲线。5.每个元素都添加了拖拽方式。每次拖拽，pos都会更新，元素的位置会自动更新，canvas也会同时更新。6.重新排序，重新实例化位置。实体代码
