如何阻止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选择器。在文档中查看Here

例如。

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