CODEWITHSUNDEEP
jqueryraphael
Karmanya Aggarwal
Karmanya Aggarwal

Reputation: 548

Raphael JS making sub-sets selectively clickable

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);    
}

Upvotes: 1

Views: 529

Answers (1)

Chris Wilson
Chris Wilson

Reputation: 6719

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.

Upvotes: 1

Related Questions