jQuery UI Draggable не вернется к первой точке

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 пикселей или менее.
Поскольку перемещение минимального прыжка (39,7 пикселя) - к точке 0 -- возьмет div за ограничительный прямоугольник, это перемещение не разрешено.

И использование ближайшего целого числа для размера сетки быстро приведет к смещению между сеткой и точками данных.

Один из способов обойти это:

1. Удалить параметр grid:[distanceBetweenPoints,0],.

2. Вместо этого привязать div при перетаскивании stop,вот так:

   /*--- 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} );
   

Смотрите это в действии на jsBin.

Answer 2

Я смог решить это со следующим:

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

Answer 3

У меня не было времени, чтобы найти реальное решение, но я обнаружил, что при перетаскивании ползунок каждый раз немного больше перемещается влево.Причина, по которой он не может вернуться на первое место, заключается в том, что после первого падения больше не хватает места.Удачи!