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

我最近花了几天时间来解决这个问题，我想出了一个对我来说效果很好的解决方案。这绝对是一种黑客攻击，并不适用于所有情况。

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元素将始终填充屏幕上的某个方块，因此很容易将代理div放在目标上。在其他情况下，可能会困难得多。使用'收容'选项确保不将框架拖到框架外也不是太难......只需要仔细考虑一下，你就必须在每次拖动之间重置收容。

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

JQuery＆amp; SVG拖放

1 个答案: