官网上关于拖动的例子 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的拖动。
至于其他图形的拖动,可以参照我的改动进行相应的修改