js是如何实现拖拽raphael.js所绘制图像的

目前所做的项目中出现一个新的需求：用svg绘制条状图展示数据。并且预加载出前后两个相同范围中的数据，当鼠标进行拖拽的时候，可以向前或者向后展示。

实现过程：

 

1.首先获取鼠标焦点的坐标：

function mousePosition(ev){

    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

 

    return {

        x:ev.clientX + scrollLeft - document.documentElement.clientLeft,

        y:ev.clientY + scrollTop - document.documentElement.clientTop

    };

}

function mouseMove(ev){

    ev = ev || window.event;

    var mousePos = mousePosition(ev);

    restrictX = mousePos.x;

    restrictY = mousePos.y;

}

document.onmousemove = mouseMove;

document.onclick = mouseMove;

当鼠标在页面上发生点击或者移动的事件时，便会获取鼠标焦点当前的坐标：restrictX，restrictY
2.利用raphael.js绘制所要展示的svg图像，svg图像可能是有多个元素组成的，因此最好将所有的元素都push到一个set当中，这样当进行操作的时候，只需要对一个set进行操作，会比较方便。
3.获取svg并添加动作：
这里有一个问题，就是raphael.js所绘制的svg图像如何添加id，如果可以添加id的话，获取元素会更方便。
在工程当中，svg只有一个，因此，在我不清楚如何使用raphael.js给svg添加id的情况下，只能通过标签或取元素：document.getElementsByTagName("svg");
获取之后将要添加动作：
其实，仔细想之，不论拖拽什么，无非都是鼠标的三个动作：按下鼠标：onmousedown，移动鼠标：onmousemove，松开鼠标：onmouseup，这些动作要配合document.getElementsByTagName("svg");，以确保所有的操作都只对我们选中的svg有效。
所以：拖拽的流程可以归结为：
（1）设置五个变量：
var start_x = null;//代表鼠标点击位置的横坐标
var start_y = null;//代表鼠标点击位置的纵坐标
var move_flag = false;//用于判断鼠标是否点击，从而保证，只有点击鼠标之后，移动鼠标的同时才可以移动svg
 var trans_y;//用于记录鼠标所移动的距离
 var last_trans_y = 0;//记录上一次拖拽结束时，鼠标所移动的距离
（2）点击鼠标动作（前期准备）
给start_x和start_y赋上当前鼠标焦点的坐标值
给move_flag赋值为true，准备好移动
（3）鼠标移动（开始拖拽）
当鼠标移动且move_flag为true的同时，用当前鼠标焦点坐标与start_x，start_y做差，得到移动距离，并加上上一次拖拽最后的移动距离：
trans_y=restrictY-start_y+last_trans_y;
利用raphael中的transform函数，对svg进行移动：
test_set.transform("t0,"+trans_y);
注意：这里，transform不会改变svg中元素的真实坐标，所以当你再次点击鼠标，进行新一次的transform时，svg会回到最初的位置。因此，才需要记录每一次拖拽最终移动的距离，来确保每一次拖拽，svg不会回到原来的位置。
（4）当松开鼠标，或者鼠标离开svg作用区域：
记录这一次拖拽，最终的移动距离，last_trans_y = trans_y;
将move_flag设置为false，即使鼠标移动，也无法移动svg。