To bound the movement of nodes being dragged and dropped inside regions with KineticJS, we can use the dragBoundFunc property to define boundaries that the node cannot cross.
But in my client project I need to deal with more complex groups and multiple shapes. While using the dragBoundfuntion I realized there is bug and the main group position is not maintained properly.
So at last thought of writing my own dragbound function and the over view of this work around solution as follows.
This idea was tested and developed in .NET framework and it works perfectly. So it only a matter of implementing the solution in Java Script. In here a particular shape consist of many multiple shapes such as Circles , Lines and Polygon shapes or rectangle Shapes.
So what we have to do is extract the min and max position of the whole group shape.
From the Kinetics dragbound function get the position of the main group and update the correct min and max position of the whole shape group.
That’s it now we have got the correct absolute position of the main group. Now it’s a matter of blocking the shape movement from the boundary.
This above logic will check for the condition and will return the correct maingroup position so it will be bound inside a particular boundary.
The below is the overall solution in Java Script – Kinetics.js