Currently, I have a paper.text object that can be dragged and cloned on the canvas, and when clicked, simply prints "clicked" into the console. The drag and clone is achieved by using Element.clone() on the "onend" portion of Element.drag(), however this obviously only clones the object and does not include the click function.

Since this object is only created within a function, I cannot write an Element.click() function outside of the drag function. I also need an arbitrary amount of clones, so I feel like I must include the cloning in the drag function.

Is there any way to give a clone of an object the same or separate functionality to it's parent, or do I have to include all of the functionality of the clone inside the drag function?

The code and a fiddle is included below: https://jsfiddle.net/nh3af1t9/

// Creates canvas
var paper = Raphael(0, 0, 1920, 950);
// Creates an icon
var iconDelta = paper.text(10, 10, "\u0394").attr({"fill": "#00ff00", "font-size": 15, "cursor": "pointer"});

function dragStart() {
    // Get original position of element, and set as properties .ox and .oy
    this.ox = this.attr("x");
    this.oy = this.attr("y");   
    }               
  
function dragMove( dx, dy ) {
    this.attr({ 'x': this.ox+dx, 'y': this.oy+dy  });   
    }
// Creates a clone of the icon, sets it's location to the location of the dragged icon, resets position of dragged icon
function dragEnd() {
    idClone = iconDelta.clone();
    idClone.attr({'x': this.attr('x'), 'y': this.attr('y')});
    this.attr({"x": this.ox, "y": this.oy});
  
  //or
  //iconDelta.attr({'x': this.attr('x'), 'y': this.attr('y')});
  //iconDelta.clone();
  //iconDelta.attr({'x': -10, 'y': -10});
  //this.attr({"x": this.ox, "y": this.oy});
  
}

iconDelta.drag(dragMove, dragStart, dragEnd);

iconDelta.click(function(){
    console.log('clicked');
});

//---THIS RETURNS AN ERROR---
//idClone.click(function(){
//  console.log('clicked');
//});