Raphael JS: how to correctly drag using 'transform'?

Question

I am using Raphael JS to drag a small icon along the y-direction, inside a grey bounding box. Two questions:

1. How can I make sure the icon can be dragged multiple times, without the icon returning to its initial position each time?
2. How can I force the icon to stay within the grey bounding box?

The code: http://jsfiddle.net/3jEt6/4/.

Answer 1

Dear friend your drag and drop functions are not correct. You should use it like this. And for controling border you should control image's y with paper's borders. http://jsfiddle.net/XcsN/9Bddg/

var start = function () {
    this.y = this.attr("y");
},
move = function (dx, dy) {
    if (borderControl(r, dy)) {
       this.attr({
          y: this.y + dy
       });
    }
},
up = function () {};

And your borderControl function:

function borderControl(model, dy) {
     var modelBox = model.getBBox();
     if (modelBox.y > 0 && modelBox.height + modelBox.y < CANVAS_HEIGHT) return true
     if (modelBox.y + modelBox.height >= CANVAS_HEIGHT && dy < 0) return true
     if (modelBox.y <= 0 && dy > 0) return true
     return false
 }