功能描述：
1、人体图有皮肤、骨骼、口腔、脏器四个类型切换，并且有上下左右前后方位切。
2、人体图画布区域可放大缩小拖拽。
3、从左复制并拖拽图标进人体图打点并且记录信息，拖完后右侧的图标可继续在画布里任意拖动打点。
4、右侧人体图热区(鼠标覆盖相应部位可显示区域和名称)功能，类似于hover事件
框架以及组件：vue2、vue-draggable-resizable-gorkys
功能实现思路：
运用h5拖拽功能，把左侧列表icon的draggable属性设置为 true，拖动时触发ondragstart 事件，在该事件中通过 dataTransfer.setData() 方法设置被拖数据的类型和值，在右侧组件元素上设置ondragover事件规定在何处放置被拖动的数据。在拖拽到右侧组件时通过触发ondrop事件进行右侧画布的点位赋值。并且计算出当前鼠标覆盖的位置是否某个部位热区并显示该部位热区。
难点：
1、放大缩小画布后拖拽点位偏移，是vue-draggable-resizable-gorkys组件的遗留问题
2、拖拽时鼠标hover热区事件不触发
3、使用offset设置图标位置时，会造成图标在拖动时闪跳问题，是因为offset是获取事件源leftx和lefty到鼠标的距离，当鼠标拖动当前点位移动时，事件源在当前元素和父元素之间不断切换。所以offsetX有时是鼠标到父的leftx，有时是当前元素的leftx解决思路:
1、直接覆盖vue-draggable-resizable-gorkys组件的拖拽事件，并且通过event.offsetX获取位置进行赋值
2、通过mousemove事件计算当前点位是否在某热区值范围内，并添加hover样式
3、不是办法的办法：判断当前事件源是父元素还是被拖拽元素，是父元素时才进行位置赋值。这个办法很蠢，会造成一点小卡顿，但是不会造成图标拖拽时的闪跳问题了。
最终功能图：
左侧被拖拽列表代码：
右侧画布、热区代码：
