jQuery UI 可拖动不会返回到第一个点

Question

我有一个 jQuery UI 可拖动元素。这非常简单。它只是一个 div（容器），其中另一个 div（可拖动的部分）设置为网格。问题是我移动元素一次后我无法返回到第一个点。如果我更改网格大小，它可以工作，但我需要它在该网格上工作，因为它匹配其下面的某些元素

相关 JS：

 $('<div class="slider_wrap"><div class="slider"></div></div>').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);
    });

有什么想法吗？

例子： http://jsbin.com/ucebar

Answer 1

您使用的是分数网格大小，例如 39.7 像素。因此，每次拖动时，div 都会向左偏移一个像素。这意味着位置零很快变得不可用：

也就是说：在点 1，ui.position.left 将是 38 像素或更小。
由于向点 0 移动最小跳跃 (39.7px) 将使 div 超出边界矩形，因此不允许该移动。

而且，使用最接近的整数作为网格大小将很快导致网格和数据点之间不对齐。

解决这一切的一种方法是：

1. 删除grid:[distanceBetweenPoints,0],参数。

2. 相反，在拖动停止时捕捉div，如下所示：

   /*--- 捕捉到最近的网格。
   */
   var gridPos = Math.round ( 
                       Math.round（ui.position.left / distanceBetweenPoints） 
                       * 点之间的距离
                   ）；
   var delta = gridPos - ui.position.left;
   var newOffset = $(this).offset().left + delta;
   $(this).offset ( {left: newOffset} );
   

在 jsBin 上查看它的实际应用。

Answer 2

我没有时间找出真正的解决方案，但我发现如果您拖放滑块，每次都会稍微向左移动一些。它无法回到第一名的原因是，在第一次下降之后，就没有足够的空间了。祝你好运！

Answer 3

我能够通过以下方法解决它：

.draggable({
  ...
  drag : function(event, ui) {
    ui.position.left = Math.round(ui.position.left / distance_between_points) * distance_between_points;
  }
});