как я могу сделать, изображение движется? Пользователь должен его взять и переместить его мышкой raphael javascript

Question

вот эта идея ..

Я хочу поместить картинку ... и пользователь будет перемещать ее в любом разделе, первый я использовать изображение

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

теперь пользователь будет видеть изображение, с помощью мыши он собирается взять его и переместить его, как я могу это сделать? ...

с последним кодом, он не двигается, мне нужно, чтобы он двигался .. как мне это сделать?

Answer 1

Изображения не имеют атрибутов cx cy, см. SVG Specification (Рафаэль использует SVG для визуализации графики), вы должны использовать атрибуты x и y.

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

или использовать преобразование:

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