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拖放

回答

相关问题