JQuery和SVG拖放

過去幾天我一頭撞牆撞牆，無處可去，所以我只想找到某種確認，我試圖做的事實際上是可以做到的。 ...JQuery和SVG拖放

我有一個SVG頁面與DIV。我希望能夠點擊SVG的一個組件並拖動它。理論上很簡單。我有一個凌亂的原始JavaScript版本，但我試圖在JQuery中做到一致性。

我有以下的，至極拖圍繞整個容器DIV：

* VAR svgName = 「/mySvg.svg」;

$(document).ready(function($) { 
    $('#svgDiv').svg(); 
    var svg = $('#svgDiv').svg('get'); 
    svg.load(svgName, 

    function() { 
     $('#svgDiv').draggable().bind('mousedown', function(event, ui) { 
      $(event.target.parentElement).append(event.target); 
     }).bind('drag', function(event, ui) { 
      event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")"); 
     }); 
    }); 
});

我改成了這個這個，而且我認爲他會得到通過它的ID的SVG的元素，但這並沒有什麼。就好像JQuery無法看到「內部」（需要更好的單詞）DIV。 *

var svgSource = "/mySvg.svg"; 

$(document).ready(function($) { 
    $('#svgDiv').svg(); 
    var svgObj = $('#svgDiv').svg('get'); 
    svgObj.load(svgSource, 
     function() { 
      var svgObj2 = $('#svgDiv').svg('get'); 
      var svgElem = svgObj2.getElementById('pathIdOne'); 
      $(svgElem).draggable().bind('mousedown', function(event, ui) { 
       $(event.target.parentElement).append(event.target); 
      }).bind('drag', function(event, ui) { 
       //event.target.setAttribute("transform", "translate("+event.clientX+","+event.clientY+")"); 
       event.target.setAttribute('x', ui.position.left); 
       event.target.setAttribute('y', ui.position.top);      
      }); 
     }); 
});

任何人都可以看到任何昭然若揭需要改變，可以這樣做，或者這只是完全錯誤的？

來源

2012-07-17 KPS

沒有那麼多svg元素具有'x'和'y'屬性，您可能會因'transform'屬性而帶來更多運氣。 – 2012-07-17 14:44:29

我最近花了幾天的時間來解決這個問題，並且提出了一個對我來說工作得很好的解決方案。這絕對是一個黑客，並不會在所有情況下工作。

This link對如何解決一般問題有很好的描述，這絕對是「更好」的解決方案。不過，我想繼續使用JQuery的優秀的Draggable API。

你可以看到我在小提琴here中做了一個快速模擬。關鍵的想法是使用一個代理div，您可以將它完全懸停在要拖動的svg元素上。然後在拖動代理div時更改svg元素的x和y座標。事情是這樣的：

$('#proxy').on('drag', function(e) 
    { 
     t = $('#background'); 
     prox = $('#proxy'); 
     t.attr('x', t.attr('x')*1 
        + prox.css('left').slice(0,-2)*1 
        - prox.data('position').left) 
      .attr('y', t.attr('y')*1 
         + prox.css('top').slice(0,-2)*1 
         - prox.data('position').top); 
     prox.data('position',{top : prox.css('top').slice(0,-2)*1, 
           left: prox.css('left').slice(0,-2)*1} 
       ); 
    });

在我的情況下，SVG元素，我想拖總是充滿整個屏幕上的某個廣場上，所以這是很容易在目標定位代理股利。在其他情況下，這可能會更困難。使用'遏制'選項也不難，以確保您不會將框架拖到框架外部......只需要一些小心的數學計算，您必須在每次拖動之間重置遏制。

爲了使其適用於更多的SVG元素，您可以使用變換而不是x和y座標。

來源

2013-06-21 18:00:06 galdre

JQuery和SVG拖放

回答

相關問題