Actualmente, tengo un objeto paper.text que se puede arrastrar y clonar en el lienzo, y cuando se hace clic, simplemente imprime "clic" en la consola. El arrastrar y clonar se logra usando Element.clone() en la parte "onend" de Element.drag(), sin embargo, esto obviamente solo clona el objeto y no incluye la función de clic.
Dado que este objeto solo se crea dentro de una función, no puedo escribir una función Element.click() fuera de la función de arrastre. También necesito una cantidad arbitraria de clones, por lo que siento que debo incluir la clonación en la función de arrastre.
¿Hay alguna manera de darle a un clon de un objeto la misma funcionalidad o una funcionalidad separada para su padre, o tengo que incluir toda la funcionalidad del clon dentro de la función de arrastre?
El código y un violín se incluyen a continuación: 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'); //});