title: Set Position During Drag using Jquery Draggable Div
body: <p>I've been working on a script that would limit the containment of a draggable div to a circle (instead of a rectangular parent div).  I found this thread: <a href="https://stackoverflow.com/questions/8515900/how-to-constrain-movement-within-the-area-of-a-circle">How to constrain movement within the area of a circle</a> which seemed to solve some of my questions.  I've got the proper functions in place and when I call those functions inside the drag function it will return the proper x &amp; y position of the div.  I know this because I can check the console log during the drag function and check the position of the div.  However, my problem is that I can't seem to set the actual position during the drag event.  The console reports the proper position values, but the div never actually gets constrained to the circular boundary.  For example, if I drag the div to the center of the circle and then move it up vertically past the circle boundary... the div doesn't stop at the circle, however the console clamps the position to [0,50]//50 is the the center of the circle in both the X &amp; Y axis.  I read on some other threads that I might have to use a helper object, but I didn't seem to get anywhere with this method.  I'm posting a simplified example in hopes that someone can help.  Thank you.</p>
  
  <pre><code>this.light = document.createElement("div");
  this.light.style.position='absolute';
  this.light.style.left="20px";
  this.light.style.top="40px";
  this.light.style.width="20px";
  this.light.style.height="20px";
  
  $(parentdiv).append(this.light);
  
  var circle_cenx = 50.0;
  var circle_ceny = 50.0;
  var circle_radius = 50.0;
  
  $(this.light).draggable({ 
      drag: function( event, ui ){
          var position = $(that.light).position();
          var result = limit(position.left+10, position.top+10, circle_cenx, circle_ceny);
          $(that.light).css({'top': result.y, 'left': result.x});
          position = $(that.light).position();
          console.log(position);
      }
  });
  
  function limit(x, y, cenx, ceny) {
      var dist = distance([x, y], [cenx, ceny]);
      if (dist &lt;= circle_radius) {
          return {x: x, y: y};
      } 
      else {
          x = x - circle_cenx;
          y = y - circle_ceny;
          var radians = Math.atan2(y, x);
          return {
             x: Math.cos(radians) * circle_cenx + circle_radius,
             y: Math.sin(radians) * circle_ceny + circle_radius
          }
      } 
  }
  
  function distance(dot1, dot2) {
      var x1 = dot1[0],
          y1 = dot1[1],
          x2 = dot2[0],
          y2 = dot2[1];
      return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
  }
  </code></pre>