Question

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

相关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像素或更少由于移动最小跳跃（39.7px） - 朝向点0 - 将div取在边界矩形之外，因此不允许移动。

并且，使用最接近网格大小的整数将很快导致网格和数据点之间的错位。

解决所有这一切的方法是：

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

相反，请在拖动stop时捕捉div，如下所示：

/*--- Snap to nearest grid.
*/
var gridPos     = Math.round ( 
                    Math.round (ui.position.left / distanceBetweenPoints) 
                    * distanceBetweenPoints
                );
var delta       = gridPos - ui.position.left;
var newOffset   = $(this).offset ().left  +  delta;
$(this).offset ( {left: newOffset} );

See it in action at jsBin.

Answer 2

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

Answer 3

我能够用以下方法解决它：

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

jQuery UI draggable不会回到第一点

3 个答案: