Home/ Questions/Q 7995763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T14:31:01+00:00

I am trying to write some code that allows SVG elements to be dragged

  • 0

I am trying to write some code that allows SVG elements to be dragged around. This is pretty easy with jQuery, jQuery UI and jQuery SVG, and works fine in Firefox, but in Chrome when I drag the SVG element, an offset is apparently added to its coordinates. I can’t see anything I’m doing wrong, or discover any known bug in this area.

I’ve constructed a small example that illustrates the problem:

<html>
  <head>
    <title>Foo</title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
    <script type="text/javascript">
$(function() {
    var svgOnLoad = function () {
        var svg = $('#canvas').svg('get');
        $('#piece')
            .draggable()
            .bind('drag', function (event, ui) {
                // Update transform manually, since top/left style props don't work on SVG
                var t = event.target.transform.baseVal;
                if (t.numberOfItems == 0) {
                    t.appendItem(svg.root().createSVGTransform());
                }
                t.getItem(0).setTranslate(ui.position.left, ui.position.top);
            });
    }
    $('#canvas').svg({loadURL: "foo.svg", onLoad: svgOnLoad});
});
    </script>
  </head>
  <body>
    <div id="canvas" style="width: 100%; height: 100%;"></div>
  </body>
</html>

where foo.svg is just:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="450" height="450">
    <rect id="piece" width="50" height="50" x="100" y="100" />
</svg>

An online version can be found at:

http://jsfiddle.net/rrthomas/v477X/2/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There seems to be a bug in jQueryUI here: in non-Webkit browsers, the ui.position object uses absolute coordinates, whereas in other browsers it’s an offset from ui.originalPosition. I don’t know which is correct; the bug is that the behavior is inconsistent. I’ve filed a bug report at:

    http://bugs.jqueryui.com/ticket/8335

    The workaround is therefore to store the original coordinates of the top-level element, and set the coordinate to (ui.position – ui.originalPosition + origCoords) when setting the translate transform in Webkit browsers. (Jlange’s answer uses the x and y attributes of the rect used in my minimal example, which works fine there, but does not work with more complex objects which a) may not have x and y attributes (e.g. if the top-level element is a g element) and b) where the coordinates returned seem not to be those of the top-level element anyway (I’m afraid I don’t know why).) Minimal code follows:

    var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
    $('#piece')
        .draggable()
            .on({
                dragstart: function (event, ui) {
                    var tlist = this.transform.baseVal;
                        if (tlist.numberOfItems == 0) {
                            tlist.appendItem(svg.root().createSVGTransform());
                        }
                        var tm = tlist.getItem(0).matrix;
                        var pos = {left: tm.e, top: tm.f};
                        $.data(this, 'originalPosition', pos);
                    },
                    drag: function (event, ui) {
                        // Update transform manually, since top/left style props don't work on SVG
                        var tlist = this.transform.baseVal;
                        var CTM = this.getCTM();
                        var p = svg.root().createSVGPoint();
                        p.x = ui.position.left + CTM.e;
                        p.y = ui.position.top + CTM.f;
                        if ($.browser.webkit) { // Webkit gets SVG-relative coords, not offset from element
                            var origPos = $.data(this, 'originalPosition');
                            p.x -= ui.originalPosition.left - origPos.left;
                            p.y -= ui.originalPosition.top - origPos.top;
                        }
                        p = p.matrixTransform(CTM.inverse());
                        tlist.getItem(0).setTranslate(p.x, p.y);
                    }});
};
$('#canvas').svg({onLoad: svgOnLoad});

    ​​
    Live version at: http://jsfiddle.net/rrthomas/v477X/

    • 0