jQuery draggableを画面からドラッグするのを止めるには？

Question

私は現在BootstrapとRWDを一般的に研究しています。これらのトピックで経験を積むために反応的なフォトギャラリーを構築したいと思います。

私はすでに1つのものを除いて、私が望むものの95％を構築しました。

基本的に、小さな画像のグループが隣り合っています。小さな画像をクリックすると、大きな画像が表示されます。 このグループの画像はjQueryのドラッグ可能な画像です。問題がある場合は、画面からドラッグすることができます。私は他の類似の質問の答えに見る何

$("#myDraggable").draggable({ 
    scroll: true, 
    axis: "x", 
    cursor: "move"   
}); 

は、人々がscroll: falseを使用することをお勧めしますが、私はスクロールできるようにしたいので、それは私が必要なものではないということです。

私はcodepenで利用可能なすべてのコードを持って：あなたはエディタビューとフルページ間を変更するには表示の変更]ボタンをクリックすることができcodepenに精通していない場合https://codepen.io/tomsoos/full/WRqeJR/

を。

フルページでコードを開き、画像のグループを画面外にドラッグしようとすると、そのようにすることができます。

私の質問はどのように私はそれを防ぐことができますが、まだこれらの画像をドラッグすることができますか？

Answer 1

封じ込めオプションを使用すると、アイテムがページ上のコンテナからドラッグされなくなります。 ここで渡される文字列はjqueryセレクタです。たとえば、Hereの文書で

などがあります。

$("#myDraggable").draggable({ 
    scroll: true, 
    axis: "x", 
    cursor: "move", 
    containment: "body" 
});