jQuery UI draggableは最初のポイントに戻ることはありません

Question

私はjQuery UIのドラッグ可能な要素を持っています。それは非常に簡単です。それは、グリッドに設定された別のdiv（ドラッグ可能な部分）を持つ単なるdiv（コンテナ）です。問題は、要素を1回移動した後、最初の点に戻ることができないことです。私は、グリッドのサイズを変更する場合、それは動作しますが、私はそれを下回る

関連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が移動するため、その移動は許可されません。

グリッドサイズに最も近い整数を使用すると、すぐにグリッドとデータポイントの位置がずれます。

1. grid:[distanceBetweenPoints,0],パラメータを削除：このすべての周り

   一つの方法は、です。

   /*--- 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

私は次のようにそれを解決することができました：

代わりに、これと同じように、ドラッグstop時にdiv要素をスナップ

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