svg 开发篇（三）

这一篇文章中我们主要了解一下拖拽和缩放的功能。

1.拖拽的功能

拖拽事实上只是div+鼠标的操作。

原理：1.需要两个嵌套的div
        2.需要拖拽的一个div永远保持在最上面。

        3.当鼠标按下的时候，记录当前鼠标所在屏幕的位置

        4.当鼠标按下并移动的时候，计算移动的距离，并且将div绝对定位。

        5.当鼠标松开的时候，设置div的z-index为最大的。

 

2.缩放的功能

缩放是为改写div的原滚动条事件，添加鼠标滚动监听事件，并在圆心保持不变的情况下，根据缩放比例计算轨道图起始点坐标。

     

    设置缩放；