Restrict an object to stay within another object

This is related to SVG, I have a large SVG object made of paths which stays static. With a press of a button, I can create another SVG object inside the larger object. The second object can be dragged with the mousedown.

PROBLEM:

Now I want to add a restriction so that the second object created cannot venture outside of the main object.

I tried using 'mouseup' for restriction but that does not work because the restriction is applied according to the cursor point on the second object, rather than the border of the second object.

Hope someone can help.

UPDATE:

@Phrogz : We have been trying to get Kevin's code to work but are struggling to get any results. We have a function attached to onmouseup to find out the intersected points of the object on the underneath path.

The function is suppose to give the results of the intersection & give an alert that the function has been exected. Its not giving anything in response, leading us to wonder whether the function is being executed at all.

Here is the main code:

var path=svgDoc.getElementById("path");


var str=intersectPathShape(path,DragTarget);
     alert(str)

Phrogz, any thoughts on this开发者_运维技巧?

You will need to use an intersection library like this one by Kevin Lindsey to detect when the paths overlap and prevent it. (He also provides demos of his code.)

Depending on how you implement your dragging, you may also need to check the bounding box of the two items to ensure that one is contained in the other (since dragging the child completely outside the parent would cause them not to intersect, but also not be a legal position).

The simplest code would be to store the last position of the child and return it to that position when an intersection is detected. Under fast dragging, though, this might cause the child to stop being dragged at a spot that is not actually touching. For a better user experience, you may want to try a binary search of intermediary offsets between the last known-good position and the current position to find the closest point along that path that is legal.

Kayote,

I think I answered this in another question. The short version is have a look at this github project:

https://github.com/thelonious/js-intersections

In particular, the loadShapes function in this file:

https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js

You will need to instantiate a specific object per node type then pass those to Intersection.intersectShapes.

HTH, Kevin