Raphael Clone

HTML

<style type="text/css"> 
   #canvas_container {   
           width: 500px;   
           border: 1px solid #000;   
        }   
</style>
<div id="canvas_container"></div>

JavaScript

var nowX, nowY, w = 500, h=400, r=30, R = Raphael("canvas_container", w, h),
    c = R.circle(100, 100, r).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: 1,
    cursor: "move"
});

var start = function () {
		var clone=c.clone();
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: .5});
    
    
},
move = function (dx, dy) {
   if (this.ox + dx <= w - r && 
       this.oy + dy <= h - r &&
       this.ox + dx >= 0 + r && 
       this.oy + dy >= 0 + r)
   {
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
   }
},
up = function () {
		
    var a = this.attr("cx"),
        b = this.attr("cy");
    this.remove();
    if(a>0&&b>0)
    clone = R.circle(a, b, r).attr({
       fill: "hsb(.8, 1, 1)",
       stroke: "none",
       opacity: 1,
       cursor: "move"
    });
    clone.drag(move, start, up);
    
};
clone.drag(move, start, up);