0

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');
//});
Scary-Jello
  • 1
  • Does this answer your question? [How to copy a DOM node with event listeners?](https://stackoverflow.com/questions/15408394/how-to-copy-a-dom-node-with-event-listeners) – pilchard Jun 06 '22 at 18:20
  • Not particularly, I'm afraid. Looking at the highlighted answer, I attempted adding an event listener to the clone with one extra line within the drag function (either "idClone.click(sampleFunction());" or "idClone.addEventListener("click", sampleFunction());") and both simply do not work, and I am unsure as how to use event delegation or how to add a wrapper function when using Raphael (I am new to JS in general, apologies). – Scary-Jello Jun 06 '22 at 18:47
  • It works if you add the click inside the drag. I'm not quite sure why you are against that ? I.e https://jsfiddle.net/b2dr30f4/ – Ian Jun 06 '22 at 19:17
  • I'm against it mostly because the console.log("clicked"); is just a placeholder and I don't want dozens upon dozens of lines in this one function, it just seems not optimal. However, if that's the easiest thing to do and doesn't have any notable downside then I'll do that. – Scary-Jello Jun 06 '22 at 19:22
  • That doesn't make sense..you have to have the code "somewhere". So put the code elsewhere in a function outside (which can call other functions if needed), and just call it in a single line inside...i.e idClone.click( myFunctionWithLotsOfLines ). – Ian Jun 06 '22 at 19:26
  • Ahhh ok. Yeah that should've been really obvious, thank you! – Scary-Jello Jun 06 '22 at 19:29
  • Here's an example using Raphaels own method adder. This may make it slightly cleaner.. https://jsfiddle.net/rhekvLqs/2/ but you can still just use functions without it. I'd also recommend looking at Snap.svg which is a bit more of a modern almost identical version of Raphael (same author). – Ian Jun 06 '22 at 19:50

0 Answers0