Drag & Drop (Stackoverflow)

HTML

<div id="canvas" align="left"></div>

JavaScript

CANVAS_WIDTH = 225;
CANVAS_HEIGHT = 300;
paper = Raphael('canvas', CANVAS_WIDTH, CANVAS_HEIGHT);
var backGround = paper.rect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
backGround.attr({
    fill: "lightgrey",
        "fill-opacity": 0.5,
        "stroke-width": 0
});

    r = paper.path("M 50 50 l 50 70 l 70 50 z").attr({fill: '#ccc'});
//r = paper.image('http://www.razorleaf.com/wp-content/uploads/2009/09/Down-Arrow-Icon-245x249.png', 97, 60, 25, 36);
var start = function () {
    this.y = this.attr("y");
    this.x = this.attr("x");
},
move = function (dx, dy) {
    if (borderControl(r, dy)) {
        this.attr({
            y: this.y + dy,
            x: this.x + dx
        });
    } else {
    	this.attr({
      			x: this.x
      })
    }
},
up = function () {};

function borderControl(model, dy) {
    var modelBox = model.getBBox();
    if (modelBox.y > 0 && modelBox.height + modelBox.y < CANVAS_HEIGHT) return true
    else if (modelBox.y + modelBox.height >= CANVAS_HEIGHT && dy < 0) return true
    else if (modelBox.y <= 0 && dy > 0) return true
    else return false
}
paper.set(r).drag(move, start, up);