javascript - 可拖动图库 - 超出视口(viewport)问题

Question

我正在制作一个小照片库。
基本上，我想要的是:几张照片(数量应该动态调整!)内联定位，超出窗口的视野。
页面本身不应该是可滚动的，但是您可以通过简单地拖动图像来“滚动”图像。由于我之前使用过 jQuery UI 中的 .draggable，并且它的工作效果出奇的好且性能出色，所以我想我应该继续使用它。
只要使其可拖动就可以完美地工作。

我的问题:我可以将我的画廊移动到任何我想要的地方:我可以将其拖到屏幕之外，我可以在屏幕中间放开，等等。我不希望能够将我的内容拖出视口(viewport)。 ( here's 一个它工作的例子。它不是用 .draggable 制作的，而是用裸露的 JS 制作的)。

HTML:

<div id="imgWrap">
    <img src="#">
    <img src="#">
    <img src="#">
    <img src="#">
</div>

CSS:

#imgWrap {
    overflow-x: hidden;
    white-space: nowrap;
    position: absolute;
}

#imgWrap img {
    height: 200px;
    display: inline-block;   
}

JS:

$("#imgWrap").draggable({
    axis: "x"
});

JSFiddle:http://jsfiddle.net/x94Lxrdu/8

(我尝试了 .draggable 提供的“遏制”和“捕捉”功能，但都不起作用。)

提前非常感谢你们!非常感谢您的帮助。

Answer 1

您所需要的只是设置包含属性:

jsFiddle demo

var $imgWrap = $("#imgWrap");
$imgWrap.draggable({
    axis: "x",
    containment : [window.innerWidth-$imgWrap.width(), 0,0,0]
});

containment内的值代表:[X1, Y1, X2, Y2]

如果您不想使用cotnainment，但添加一些动能和动画:
jsFiddle demo