raphael js 拖动图片的功能（对原例子的改动）

官网上关于拖动的例子  http://raphaeljs.com/reference.html#events

 

里有一个drag 的例子

具体代码可以参照该例子

 

 

本人先引入了一幅图片

 var cc=paper.image("pic/p1.jpg",30,40,120,120).attr({
 
    stroke: "none",
    opacity: .5,
    cursor:"pointer"
});

 

 

然后按照教程：

bb.drag(move, start, up);

 

但不能实现拖动。通过在Firefox下查看DOM 结构，发现原例中

var
 c = 
R.circle(100
, 100
, 50
).attr({

    fill: "hsb(.8
, 1
, 1
)"
,

    stroke: "none"
,

    opacity: .5


});

var
 start = 
function
 () {

    // storing original coordinates


    this
.ox = 
this
.attr("cx"
);

    this
.oy = 
this
.attr("cy"
);

    this
.attr({opacity: 1
});

},

move = 
function
 (dx, dy) {

    // move will be called with
 dx and dy


    this
.attr({cx: this
.ox + 
dx, cy: this
.oy + 
dy});

},

up = 
function
 () {

    // restoring state


    this
.attr({opacity: .5
});

};






改成：

var start = function () {

    // storing original coordinates

    this.ox = this.attr("x");

    this.oy = this.attr("y");

    this.attr({opacity: 1});

},

 move = function (dx, dy) {

    // move will be called with dx and dy

    this.attr({x: this.ox + dx, y: this.oy + dy});

},

 up = function () {

    // restoring state

    this.attr({opacity: .5});

	

};







this.attr("cx")

this.attr("cy") 中的cx,cy  表示的是ellipse 或者circle  在画布中的起点坐标



而image  和 rect  中用 x,y 来表示在画布中的起点坐标











通过将cx ,cy 改成了  x, y  就能实现图片和rect的拖动。



至于其他图形的拖动，可以参照我的改动进行相应的修改