I've been trying to use jQuery UI and especially the draggable function for hours.

I kinda don't know how to use the containment.

There is a left div in my HTML page which take 25% of the width of the page, and inlined to it an SVG with severals polygon.

I'm trying to be able to move the whole SVG on the x axis from n (in the example n is set to 10) to the end of the SVG with as n a blank margin from the right border on the page like the one between the left div when the SVG is fully dragged to the left.

Here is a fiddle link :  https://jsfiddle.net/Wryth/bffuxzjt/6/ (I have to find var a)

I'd really appreciate any help you can provide.