如何停止將jQuery拖拽到屏幕之外？

Question

我目前通常學習Bootstrap和RWD，並且我想建立一個響應式照片庫以獲取這些主題的經驗。

除了一件東西，我已經完成了95％的目標。

基本上，我有一組彼此相鄰的小圖像，當我單擊小圖像時，可以看到更大的圖像。 這組圖像是可拖動的jQuery，它的問題是我可以將其拖離屏幕。

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

我在其他類似問題的答案中看到的是，人們建議使用scroll: false但這不是我所需要的，因為我希望能夠滾動。

我在codepen上有所有可用的代碼： https ：//codepen.io/tomsoos/full/WRqeJR/

如果您不熟悉Codepen，則可以單擊“更改視圖”按鈕以在“編輯器視圖”和“整頁”之間進行切換。

當您在“整頁”中打開代碼並嘗試將圖像組拖離屏幕時，您將能夠執行此操作。

我的問題是如何防止這種情況，但仍然可以拖動這些圖像？

Answer 1

使用遏制選項，這將阻止該項目被拖出頁面上的容器。 傳遞的字符串是一個jquery選擇器。 看看這里的文檔

例如。

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