title: Restrict an object to stay within another object
body: <p>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.</p>
  
  <p>PROBLEM:<br>
  Now I want to add a restriction so that the second object created cannot venture outside of the main object.</p>
  
  <p>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.</p>
  
  <p>Hope someone can help. </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>@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.</p>
  
  <p>The function is suppose to give the results of the intersection &amp; 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.</p>
  
  <p>Here is the main code:</p>
  
  <pre><code>var path=svgDoc.getElementById("path");
  
  
  var str=intersectPathShape(path,DragTarget);
       alert(str)
  </code></pre>
  
  <p>Phrogz, any thoughts on this?</p>