snap.svgを使用してsvgでサークルをドラッグできるのは

Question

snap.svgを使用しようとしています。私は円、矩形、イメージを作成しました。私はサークルをドラッグできますが、他のものはドラッグできません。私は何が間違っているのか分からない。最後の1時間の撮影で問題が発生しました。

var s = Snap(400,400); 
var img_src = "http://static.jsbin.com/images/dave.min.svg"; 
var rectangle = s.rect(160, 190, 150,150); 
var bigCircle = s.circle(100, 100, 100); 
var image = s.image(img_src, 10, 10, 80, 80); 

var moveFunc = function (dx, dy, posx, posy) {  
    this.attr({ cx: posx , cy: posy }); 
}; 

bigCircle.drag(moveFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

rectangle.drag(moveFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

私が使用した作業コード： http://jsbin.com/vanequ/edit?html,js,output

アップデート：私は、長方形や画像に移動機能を渡さないとき ITSは動作するようです。しかし、関数が円であるときに機能します。私は何の手がかりも持っていません。私はsnap.svgを完全に理解していないので、私の無知と関係しているかもしれません。

これは動作します：

rectangle.drag(); 
image.drag(); 

Answer 1

あなたmoveFuncはCX/CY属性を設定しています。サークル要素はcx/cy属性を使用して配置されますが、rect要素とimage要素はx/y属性を使用して配置されます。したがって、moveFuncはサークルエレメントに対してのみ機能します。 1つの可能な解決策は、2つの移動関数、すなわち、cx/cyを設定する円の関数とx/yを設定するrect/imageの関数の1つです。たとえば...

var s = Snap(400,400); 
var img_src = "http://static.jsbin.com/images/dave.min.svg"; 
var rectangle = s.rect(160, 190, 150,150); 
var bigCircle = s.circle(100, 100, 100); 
var image = s.image(img_src, 10, 10, 80, 80); 

var moveCircleFunc = function (dx, dy, posx, posy) {  
    this.attr({ cx: posx , cy: posy }); 
}; 
var moveRectFunc = function (dx, dy, posx, posy) {  
    this.attr({ x: posx , y: posy }); 
}; 

bigCircle.drag(moveCircleFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 

rectangle.drag(moveRectFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
); 
image.drag(moveRectFunc, 
       function(){ 
        console.log("Move started"); 
       }, 
       function(){ 
        console.log("Move stopped"); 
       } 
);