Constraint usage

[Santhoshsvg]

Dear Ulrich,

I have a parent SVG element and lot of child elements which are having both draggable and resizable options attached to them.

When i try to drag or resize, i would like to do it within an constraint(within the parent SVG element boundary).

var containmentX1 = $("#cvs").offset().left;
var containmentY1 = $("#cvs").offset().top;
var containmentX2 = ($("#cvs").outerWidth()  +  $("#cvs").offset().left - $("#ChildElement").outerWidth());
var containmentY2 = ($("#cvs").outerHeight() +  $("#cvs").offset().top  - $("#ChildElement").outerHeight());
var opt = {
  constraint: {
    minX: 0,
    minY: 0,
    maxX: 1000,
    maxY: 1000
  }
};
this.resize(opt).draggable(opt);

But i couldnt achieve what i am supposed to do, the child elements can be dragged outside the parent element boundary .

Pls advice what needs to be done on this and the miss that i made in my implementation.

Thanks in advance.

[Fuzzyma]

The draggable-plugin does not has an option param but only a constraint param. So in your case obj should be replaced with obj.constraint leading to this code:

this.resize(opt).draggable(opt.constraint);

[Santhoshsvg]

Hi Ulrich,

Is there any way for to pass both constraint as well snaptogrid for the draggable plugin.

Thanks in advance

[Fuzzyma]

There is no snapToGrid option in svg.draggable.js. You have to implement one on your own using the constraint feature. You can pass a function to constraint which is used to return the new x and y coordinates. See here on how to implement that: svgdotjs/svg.draggable.js#60