title: constrain within a triangle
body: <p>I am looking for a generic piece of code (javascript) that would work with jquery UI to constrain movement(drag) of a div within an triangle.</p>
  
  <p>similar to this (http://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle) but a triangle, and not a circle.</p>
  
  <p>I would prefer the triangle to be defined as a rapheal svg like this...</p>
  
  <pre><code>(function() {
    Raphael.fn.triangle = function (cx, cy, r) {
    r *= 1.75;
    return this.path("M".concat(cx, ",", cy, "m0-", r * .58, "l", r * .5, ",", r * .87, "-", r, ",0z"));
  };
  
  var paper = Raphael(document.getElementById("triangle"), "100%", "100%");
          var triangle = paper.triangle(100,100,90);
          triangle.attr("fill", "#444444");
          triangle.attr("stroke", "#444444");
  
  
  
  $( "#draggable" ).draggable({ containment: "#triangle svgnode", scroll: false });
  </code></pre>
  
  <p>looking forward to solutions.</p>
  
  <p>I would like to note that the draggable element could also be a svg node if that is easier.</p>