Raphael JS可以选择性地点击子集

时间:2013-03-13 07:20:12

标签: jquery raphael

所以我的论文有6种符号。每个符号都是圆圈和路径的集合。我只想让一些圆圈可以点击以拖动集合。 例如,如果符号有2个圆圈和一个路径 - 我希望能够单击其中一个圆圈来拖放该组(已经有详细记录的内容)。如果用户点击另一个圈子 - 什么都不应该发生。 由于我的Raphael元素是由用户动态创建的 - 我将每个集合在创建时推送到数组上。我是否可以访问集合中的特定圆圈并使其可以通过集合数组进行点击?

以下是我插入一组

的方法
{
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);
}

这也是我如何设置可拖动的

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

1 个答案:

答案 0 :(得分:1)

没问题。有两种方法可以做到:

如果它只有一个可拖动的圆圈,只需将拖动事件附加到该圆圈,但是调用该集合上的平移,而不是this上的(即使是拖动也会引用单个元素) listener附加到set对象。)由于这是动态的,你可以使用Raphael的.data()函数找到合适的集合,adds key value pairs to an object,如下所示:

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

然后你只需要调用翻译事件 - 顺便说一句,你应该在有机会时适应transform(),因为翻译已被弃用 - 在this.data("myset")的结果

如果集合中的多个对象是可拖动的,那么您可以执行稍微不同的操作: 如果您希望拖动它们,请使用.data()向对象添加“candrag”属性。然后在拖动集合时检查此值,并且如果单击的对象对此值具有“true”,则仅转换(也称为转换)该集合。类似的想法。