JQuery & SVG 拖放

Question

几天来，我的头一直撞在墙上，但一无所获，所以我只想找到某种确认，我想做的事情实际上是可行的。。。。

我有一个DIV中有SVG的页面。我希望能够点击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);                    
            });
        });
});

*

有人能看到任何明显需要改变的地方吗？这能做到吗？还是完全错了？

Answer 1

我最近花了几天时间研究这个问题，我想出了一个对我来说效果很好的解决方案。这绝对是一个破解，不会在所有情况下都有效。

这个链接很好地描述了如何解决问题，这绝对是"更好"的解决方案。然而，我想继续使用JQuery优秀的Dragable API。

你可以在这里看到我小提琴演奏的快速模型。关键的想法是使用一个代理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元素总是填充屏幕上的某个正方形，所以很容易将代理div定位在目标上。在其他情况下，这可能要困难得多。使用"包含"选项也不难确保不会将背景拖到帧外。。。这只需要一些仔细的计算，并且您必须在每次拖动之间重置包含。

为了使其适用于更多的SVG元素，可以使用变换而不是x和y坐标。