Question

this is the idea..

i want to put a image… and the user is going to move it, in any part he wants, first i use the image

var R = Raphael("hello_world", 800, 800),
elipse = R.image("mioo.jpg",100,200,100,300);

now the user is going to see the image, with mouse he is going to take it and move it, how do i do it? …

with the last code, it doens’t move, i need it moves.. how do i do it?

Answer 1

Images don’t have cx cy attributes see SVG Specification (Rafael use SVG to render graphics) you must use x and y atributes.

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});
};

or use transformations:

elipse.tx = 0;
elipse.ty = 0;
var start = function () {
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    //This is quick hack to restore previous position - because translate use 
    //relative transformation
    this.translate(-this.trx, -this.try); 
    this.translate(dx, dy);
    this.tx = dx;
    this.ty = dy;
},
up = function () {
    this.attr({opacity: .5});
};
elipse.drag(move, start, up);