title: jQuery UI draggable wont go back to first point
body: <p>I have a jQuery UI draggable element. It's extremely simple. It's just a div (container) with another div inside (draggable piece) set to a grid. The problem is after I move the element one time I can't go back to the first point. If i change the grid size it works, but I need it to work on this grid as it's matching some element below it</p>
  
  <p>Relevant JS:</p>
  
  <pre><code> $('&lt;div class="slider_wrap"&gt;&lt;div class="slider"&gt;&lt;/div&gt;&lt;/div&gt;').appendTo('#chart');
  
   $('#chart .slider')
      .draggable({
        containment:'parent',
        grid:[distanceBetweenPoints,0],
        opacity: 0.25
      })
      .bind('mousedown', function(e, ui){
        // bring target to front
        $(e.target.parentElement).append( e.target );
      })
      .bind('drag', function(e, ui){
        // update coordinates manually, since top/left style props don't work on SVG
        e.target.setAttribute('x', ui.position.left);
      })
      .bind('dragstop',function(e, ui){
        //a = true offset of slider piece
        var a = ui.position.left + distanceBetweenPoints;
        var b = containerWidth;
        var c = thePoints.length;
        var d = b / c;
        var x = a / d;
        //Since the points are in an array which starts at 0, not 1, we -1 from the currentPoint
        console.log(x)
        var currentPoint = Math.round(x)-1;
        thisPointIndex = currentPoint;
        chart.series[0].data[currentPoint].select(true);
      });
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p>Example:
  <a href="http://jsbin.com/ucebar" rel="nofollow">http://jsbin.com/ucebar</a></p>