無法拖動元素集

Question

我正在使用路徑（Raphael和SVG）創建兩個元素（1.箭頭形狀和2.虛線），我想將這兩個元素拖動到一起，但我只能將它們獨立拖動。這裏是我的代碼：

gaugeSvg = Raphael("gauge"); 

$(document).ready(function() { 
      redraw(); 
     }); 

function redraw() { 

     //Add a Arrow and line 
     var rect = gaugeSvg.path('M 0 0 L 40 -34 L 40 -14 L 80 -14 L 80 14 L 40 14 L 40 34 Z'); 

     rect.attr({ 
     "stroke": "black", 
     "fill" : "black", 
     "enable" : "true", 
     }).translate(left + width, goalY); 

     var txt = gaugeSvg.path('M 0 0 L ' + width + " 0"); 

     txt.attr({ 
     "stroke": "black", 
     "stroke-width": 12, 
     "stroke-dasharray": "-", 
     "stroke-linecap": "round" 
     }).translate(left, goalY); 

     //Create a set so we can move the 
     //arrow and line at the same time 
     var g = gaugeSvg.set(); 
     g.push(rect, txt); 
     // var g = gaugeSvg.set(rect, txt); 

     var me = this, 
     lx = 0, 
     ly = 0, 
     ox = 0, 
     oy = 0, 
     moveFnc = function(dx, dy) { 
      this.translate(dx-ox, dy-oy); 
      ox = dx; 
      oy = dy; 
     }, 
     startFnc = function() {}, 
     endFnc = function() { 
      ox = lx; 
      oy = ly; 
     }; 

     g.drag(moveFnc, startFnc, endFnc); 
    } 

Answer 1

我還沒有用過Rapheal。但是我已經通過SVG和Javascript實現了這個Drag功能。

爲了移動多個元素，您需要對它們進行分組。意思是把這些元素放在'g'組中，然後在這個'g'上應用拖曳功能。一旦完成，你需要「解散」它們。

你可以看到演示這裏http://jsfiddle.net/rehankhalid/5t5pX/

var mainsvg = document.getElementsByTagName('svg')[0]; 

function mousemove(event) { 
     var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your svg. 
     dx = svgXY.x - mx;// mx means x cordinates of mouse down 
     dy = svgXY.y - my; 

     draggroup.setAttribute('transform', 'translate(' + dx + ',' + dy + ')'); 

    } 

function getSvgCordinates(event) { 
      var m = mainsvg.getScreenCTM(); 
      var p = mainsvg.createSVGPoint(); 
      var x, y; 

      x = event.pageX; 
      y = event.pageY; 

      p.x = x; 
      p.y = y; 
      p = p.matrixTransform(m.inverse()); 

      x = p.x; 
      y = p.y; 

      x = parseFloat(x.toFixed(3)); 
      y = parseFloat(y.toFixed(3)); 

      return {x: x, y: y}; 
     }