Raphael JS making sub-sets selectively clickable

Question

So I have a paper that has 6 types of symbols. Each symbol is a collection of circles and paths. I only want to make some of circles clickable to drag the set. For example, if a symbol has 2 circles and a path - I want to be able to click one of the circles to drag and drop the set(something that has been well documented). If the user clicks the other circle - nothing should happen. Since my Raphael elements are created dynamically by the user - I push each set as it's created onto an array. Is it possible for me to access the particular circle in the set and make it clickable through the array of sets?

Here's how I insert a set

{
paper.setStart();
    var circ = paper.circle(x,y,35); //first circle - should be clickable
    var conpoints = insConPoint1(paper,x,y);
    var pathright = conpoints.path;
    var conPoint1 = conpoints.conpoint; //this is a second circle - should not be clickable
var st = paper.setFinish();
symbolarray.push(st);
}

Also here's how I make the sets draggable

function dragger(){
    this.dx = this.dy = 0;

};

function mover(s){
    return function(dx, dy){
        (s|| this).translate(dx-this.dx, dy-this.dy);
        this.dx = dx;
        this.dy = dy;
    }
};
for(var i = 0; i<symbolcount;i++){
    symbolarray[i].drag(mover(symbolarray[i]), dragger);    
}

score 1 · Accepted Answer · answered Mar 13 '13 at 12:07

No problem. Two ways you can do it:

If it's only ever one circle that's draggable, just attach the drag event to that circle, but call the translate on the set, not on this (which will always refer to the individual element, even if the drag listener is attached to the set object.) Since this is dynamic, you can find the appropriate set using Raphael's .data() function, which adds key value pairs to an object, like so:

paper.setStart();
    var circ1 = paper.circle(100,100,35); //first circle - should be clickable
    var circ2 = paper.circle(50,50,25); // second circle - not clickable
var st = paper.setFinish();
st.data("myset", st);

st.click(function(e) {
   //returns the parent set
   console.log(this.data("myset")); 
});

Then you just call the translate events--and btw, you should adapt to transform() when you get a chance, since translate is deprecated--on the result of this.data("myset")

If multiple objects in the set are draggable, then you can do something slightly different: Use .data() to add a "candrag" property to objects that is true if you want them to be dragged. Then check this value when the set is dragged and only transform (aka translate) the set if the object clicked has "true" for this value. Similar idea.

I think you've got a typo in your example: you're assigning the `myset` data attribute to the set itself, and setting the click handler on the set. I think you mean to assign `myset` on the `circ1` element (the one clickable circle), and that's the element that should have a click handler, not the set, right? — MidnightLightning, May 19 '14 at 15:23

Raphael JS making sub-sets selectively clickable

1 Answers1

Linked