0

I'm playing with draggable svg rectangles. Here's the fiddle: http://jsfiddle.net/MfegM/1763/

I made the svg elements draggable following the instructions in this thread: SVG draggable using JQuery and Jquery-svg

My problem is that in the fiddle it works perfectly, but on my website, when I start moving a square, it jumps to the right around 100px.

This is the code from my website (using 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);
        });

Where is that behaviour coming from? No errors in the console whatsoever.

Community
  • 1
  • 1
oneday
  • 1,599
  • 5
  • 18
  • 29
  • 1
    The behaviour is reproducible in the fiddle by scrolling the SVG view a bit left; the jQuery UI drag event doesn't seem to compensate. – Pete Kirkham Sep 04 '14 at 12:26
  • That SO answer is obsolete, jQueryUI .draggable doesn't work correctly, especially with pan + zoom on SVG. I'd replace it with SnapSVG's `.drag(move,start,stop)`, check out this [Snap drag demo](http://svg.dabbles.info/snaptut-drag.html) – Alvin K. Sep 05 '14 at 07:07

0 Answers0