1

几天来一直把头撞在墙上，一无所获，所以我只想找到某种确认，证明我正在尝试做的事情实际上是可行的......

我有一个带有 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);                    
            });
        });
});

*

任何人都可以看到任何明显需要改变的东西，可以这样做，还是完全错误？

4

1 回答 1

1

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

这个链接对如何解决一般问题有很好的描述，这绝对是“更好”的解决方案。但是，我想继续使用 JQuery 出色的 Draggable 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 坐标。

于 2013-06-21T18:00:06.073 回答