jquery - jQuery で画像がドラッグしすぎないようにする

Question

に設定された div 内に画像がありoverflow: hiddenます。画像をドラッグできるように設定しました。

画像をドラッグしすぎた場合に端で止まるようにするにはどうすればよいでしょうか?

現在、機能するはずの場所にスナップバックしますが、私たちが探しているものとは正確には異なります.

ここにjsfiddleがあります

Answer 1

ドラッグ可能なjQueryUIには、移動を制限するためのメソッドが付属しています。 http://jqueryui.com/demos/draggable/#constrain-movement

これは次のようになります。

$( "#draggable4" ).draggable({ containment: "#demo-frame" });

Answer 2

http://jqueryui.com/demos/draggable/によると、ドラッガー ヘルパーを作成するか、内側の $(this).data('draggable').offset.click を設定することで、ドラッグに影響を与えることができます。...これが最善の解決策かどうかはわかりませんが、これをドラッグ可能内に追加してテストしました（yPosが満たされた後）：

    if(yPos > 0)           
        $(this).data('draggable').offset.click.top += yPos;

ドラッグダウンしようとすると、実際に位置がリセットされました（少しぎくしゃくしていますが）。他の方向でも機能するはずです。(そして、jquery にはこれを達成するためのより優れたプロパティがあることがわかります)