Question

我正在玩可拖动的svg矩形。这是小提琴：http://jsfiddle.net/MfegM/1763/

我按照此主题中的说明使svg元素可拖动：SVG draggable using JQuery and Jquery-svg

我的问题是，它在小提琴中运作得很好，但在我的网站上，当我开始移动一个正方形时，它会向右跳到100px左右。

这是我网站上的代码（使用Bootstrap）：

<div class="container"> 
    <svg width="800" height="500">
      <rect class="draggable" x="1" y="1" width="200" height="200" style="fill:DeepPink;fill-opacity:0.1;stroke-opacity:0.9" />
      <rect x="201" y="1" width="200" height="200" style="fill:blue;fill-opacity:0.1;stroke-opacity:0.9" />
      <rect x="1" y="201" width="200" height="200" style="fill:red;fill-opacity:0.1;stroke-opacity:0.9" />
      <rect x="201" y="201" width="200" height="200" style="fill:purple;fill-opacity:0.1;stroke-opacity:0.9" />
    </svg>
</div>

JS：

 $('.draggable')
        .draggable()
        .bind('mousedown', function(event, ui) {
            // bring target to front
            $(event.target.parentElement).append(event.target);
        })
        .bind('drag', function(event, ui) {
            // update coordinates manually, since top/left style props don't work on SVG
            event.target.setAttribute('x', ui.position.left);
            event.target.setAttribute('y', ui.position.top);
        });

这种行为来自哪里？控制台中没有任何错误。

可拖动的SVG - 元素在拖动时改变位置（跳跃）

0 个答案: