Snap.svg - 拖動事件處理程序

Question

問題是關於Element.drag的onstart事件處理程序在新發布的Snap.svg中。

下面的代碼的意圖是註冊事件處理程序的svg對象上的拖動（onstart/onstop）的開始和停止。

 var s = Snap(800,600); 

     var bigCircle = s.circle(300,150,100); 

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

控制檯消息做工精細拖就啓動和停止，但空覆蓋默認onmove功能 - 導致沒有實際阻力發生。我如何傳遞一些說「我不想混淆默認的onmove」的東西？

（注：我寧願通過轉讓的方式來註冊事件處理程序，像大家熟悉的onClick，但那是另一回事）

---

注意幾個小時後說： 拉斐爾。 js文檔和示例提供了一些線索。至少現在我知道如何在適當的功能，通過對onmove提供默認的移動行爲：

 var s = Snap(800,600); 

     var bigCircle = s.circle(300,150,100); 

     start = function() { 
      this.ox = parseInt(this.attr("cx")); 
      this.oy = parseInt(this.attr("cy")); 
      console.log("Start move, ox=" + this.ox + ", oy=" + this.oy); 
     } 

     move = function(dx, dy) { 
      this.attr({"cx": this.ox + dx, "cy": this.oy + dy}); 
     } 

     stop = function() { 
      this.ox = parseInt(this.attr("cx")); 
      this.oy = parseInt(this.attr("cy")); 
      console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy); 
     } 

     bigCircle.drag(move, start, stop); 

Answer 1

我不知道如果我誤解你到底想要什麼？你不想要實施拖動？

因此，例如...

var s = Snap(400,400); 
var bigCircle = s.circle(150, 150, 100); 

var moveFunc = function (dx, dy, posx, posy) { 
    this.attr({ cx: posx , cy: posy }); // basic drag, you would want to adjust to take care of where you grab etc. 
}; 

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

JSBin這裏http://jsbin.com/akoCAkA/1/edit?html,js,output

Answer 2

我不能再拖累自定義處理程序，s.drag（）能夠族元素。所以我搜索進一步發現它的可能性。

文檔：

Additionaly以下拖動事件觸發：drag.start。在開始時，drag.end。在>結束並拖動。移動。一舉一動。當元素被拖到另一個元素> drag.over時。火也是如此。

解決方案：

s.drag(); 
    eve.on("snap.drag.start." + s.id, function() { 
     console.log('cool'); 
    }); 

    eve.on("snap.drag.move." + s.id, function() { 
     console.log('cooler'); 
    }); 

    eve.on("snap.drag.end." + s.id, function() { 
     console.log('way cool'); 
    }); 

前夕未記錄在snapsvg它是可用的拉斐爾。我不知道這是正確的方式或黑客。

Answer 3

掙扎了幾個小時與snap.js做到這一點之後，我終於發現svg.js及其拖動的插件，與它是如此容易得多：

var draw = SVG('svg'); 
var circle = draw.circle(10).attr({cx:30,cy:30,fill:'#f06'}); 
circle.dragend = function(delta, event) { 
    alert(this.attr('cx')) 
} 
circle.draggable(); 

所以，我切換到SVG。 js ...

Answer 4

eve.on方法不適合我，所以我做了一些探索並設法重新創建了onmove函數。另外兩個（及的OnStart onend）不需要特定的代碼來顯然工作：

var S = Snap(300,300); 

var bigCircle = S.circle(150, 150, 100); 

bigCircle.drag(onDragMove, onDragStart, onDragEnd); 

var ddx = 0; 
var ddy = 0; 
var dxDone = 0; 
var dyDone = 0; 

function onDragMove (dx, dy, posx, posy) { 
    dx = dx + dxDone; // dx and dy reset to 0 for some reason when this function begins 
    dy = dy + dyDone; // retain the last move's position as the starting point 
    this.attr({ transform: 't'+dx+','+dy }); 
    ddx = dx; 
    ddy = dy; 
    console.log('moving...'); 
}; 

function onDragStart(x,y,e) { 
    console.log('start!'); 
}; 

function onDragEnd(e) { 
    dxDone = ddx; 
    dyDone = ddy; 
    console.log('end!'); 
}; 

請但是請注意，這隻能在一個時間用於一個拖動對象。如果你需要一個自定義的拖拽另一個對象，你必須重新命名函數（即onDragStart2）和在它們之外聲明的四個變量（即ddx2）。

另外，我通過（tx，y）傳遞的'transform'字符串格式來自我在做console.log（this.attr（'transform'））後發現的內容。我還不熟悉matrix（），所以這種方式看起來更容易。

希望這會有所幫助！

Answer 5

有一個例子如何使用SnapSVG拖曳到這裏：http://svg.dabbles.info/snaptut-drag.html

var s = Snap("#svgout"); 

var rect = s.rect(20,20,40,40); 
var circle = s.circle(60,150,50); 

var move = function(dx,dy) { 
     this.attr({ 
        transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy] 
       }); 
} 

var start = function() { 
     this.data('origTransform', this.transform().local); 
} 
var stop = function() { 
     console.log('finished dragging'); 
} 

rect.drag(move, start, stop); 
circle.drag(move, start, stop);