如何阻止jQuery从屏幕拖出？

我目前一般在学习Bootstrap和RWD，我想建立一个响应式照片库以获得这些主题的体验。如何阻止jQuery从屏幕拖出？

我已经构建了我想要的95％，除了1件事。

基本上，我有一组相邻的小图像，当我点击小图像时，我可以看到它更大。这组图像是一个jQuery可拖动的问题，如果我想的话，我可以将它拖出屏幕。

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

我在其他类似问题的答案看到的是，人们建议使用scroll: false，但是这不是我所需要的，因为我希望能够滚动。

我都在codepen可用的代码：如果你不熟悉codepen您可以更改视图按钮，单击该编辑器查看和整页之间切换https://codepen.io/tomsoos/full/WRqeJR/

。

当您在完整页面中打开代码并尝试从屏幕拖出图像组时，您将能够做到这一点。

我的问题是如何防止，但仍然能够拖动这些图像？

来源

2017-02-19 Thomas Soos

使用包含选项，这将停止从页面上的容器中拖出项目。传递的字符串是一个jQuery选择器。看看Here在文档

例如。

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

来源

2017-02-19 07:21:43

谢谢**安德鲁**花时间回答我的问题！我想我已经尝试过'containment'选项，但它看起来只是阻止拖动我的拖动。我对我的代码做了建议的修改，[看看它]（http://codepen.io/tomsoos/full/WRqeJR/）。再次，您可以通过单击更改视图按钮在编辑器视图和完整页面之间切换。 –

所以你想让图像离开屏幕，但你。希望当另一端到达屏幕边缘时停止播放？ –

是的，类似的东西。我想要的基本上是当我的可拖动的左侧触摸屏幕的左侧时，我不想让它拖到右侧，只能拖到左侧。同样，当我的可拖动的右侧触摸屏幕的右侧时，我不想让它拖动到左侧，只有在右侧，如果这是有道理的。 –

如何阻止jQuery从屏幕拖出？

回答

相关问题