本篇文章，我将使用元素的drag事件做一个画图工具，具体代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Script/raphael.js"></script>
</head>
<body>
<div id="paper">
</div>
<script>
var g_masterPathArray;
var g_masterDrawingBox;
//创建一个画布
var paper = new Raphael("paper", 600, 600);
//设置一个画图区域
var rect = paper.rect(50, 50, 400, 400);
rect.attr("fill", "#eee");
//绑定区域的鼠标移动事件
rect.mousemove(function (event) {
var evt = event;
var IE = document.all ? true : false;
var x, y;
if (IE) {
x = evt.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = evt.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
else {
x = evt.pageX;
y = evt.pageY;
}
// 给区域添加两个属性ox,和oy
this.ox = x - 5;
this.oy = y - 5;
});
//区域（即鼠标）开始拖动
var start = function () {
g_masterPathArray = new Array();
};
//移动
var move = function (dx, dy) {
if (g_masterPathArray.length == 0) {
g_masterPathArray[0] = ["M", this.ox, this.oy];
//绘制线条
g_masterDrawingBox = paper.path(g_masterPathArray);
//设置线条宽度
g_masterDrawingBox.attr({ stroke: "#000000", "stroke-width": 3 });
} else
g_masterPathArray[g_masterPathArray.length] = ["L", this.ox, this.oy];
//设置线条的path属性值
g_masterDrawingBox.attr({ path: g_masterPathArray });
};
//松下鼠标
var up = function () {
};
rect.drag(move, start, up);
</script>
</body>
</html>
代码地址：
https://coding.net/u/tommy-zhang/p/raphaeljs/git/blob/master/example/example/drag.html
最终效果图如下：
原文地址：http://blog.csdn.net/zhangyuanwei88/article/details/38822993
