拖SVG組通過jQuery UI的

Question

我用這個代碼阻力SVG組：

$('svg g').draggable({ 
 
         drag: function (event, ui) { 
 
         var position = ui.position; 
 
         var $shape = $(this); 
 
         var transform = $shape.attr("transform"); 
 

 
         var translate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(transform); 
 
         ُ$shape.attr("transform", "translate(" + (position.left + ($shape[0].getBoundingClientRect().width/2)) + "," + (position.top + ($shape[0].getBoundingClientRect().height/2)) + ")"); 
 
         } 
 
       });

<svg><g class=" ui-draggable ui-draggable-handle" transform="translate(0,0)"> 
 
<path fill="#FBC596" stroke="#C35A05" stroke-width="1.5" d="M0,20L20,0l20,20L20,40L0,20z" /> 
 
<rect height="1.339713" width="16.172249" y="19.186603" x="12.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#c35a05" fill="#fbc596" /> 
 
<rect transform="rotate(-90 20,20) " height="1.339713" width="16.172249" y="19.186603" x="12.105263" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#c35a05" fill="#fbc596" /> 
 
             </g> 
 
             </svg>

但SVG組不拖累成功地位！

Answer 1

我已經解決了這個問題，此代碼

drag: function (event, ui) { 
      var t = event.target.transform.baseVal; 
      if (t.numberOfItems === 0) { 
       t.appendItem(svg.root().createSVGTransform()); 
      } 

      var offX = parseInt($(event.target)[0].getBBox().x); 
      var offY = parseInt($(event.target)[0].getBBox().y); 
      if ($.browser.chrome) { 
       t.getItem(0).setTranslate(ui.position.left - offX, ui.position.top - offY); 
      } else { 
       t.getItem(0).setTranslate(ui.position.left, ui.position.top); 
      }