可拖式图片库-视口外问题

Question

我正在小图片库工作。

基本上，我想要的是:一些照片(数量应该是动态可调的！)内联定位，从窗口的视野中走出来。

页面本身不应该是可滚动的，但是您可以通过简单的拖动来“滚动”图像。由于我以前使用过来自jQuery UI的jQuery UI，而且它运行得非常好，而且性能很好，所以我想我应该继续使用它。

只是让它拖曳的工作非常好。

我的问题:我可以把我的画廊移到任何我想要的地方:我可以把它拖到屏幕外面，我可以把它放进屏幕的中间，等等。我宁愿不能把我的内容拖出视口。(下面是是它工作的一个例子。不过，它不是用.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;   
}

联署材料：

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

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

(我尝试了.draggable提供的“包含”和"snap“函数，但它们都不起作用。)

提前谢谢你们！我将非常感谢你的帮助。

​

Answer 1

您所需要的只是设置安全壳属性：

http://jsfiddle.net/RokoCB/x94Lxrdu/12/

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

containment内部的值表示：[X1, Y1, X2, Y2]

如果您不想使用cotnainment，而是添加一些动态和动画

http://jsfiddle.net/RokoCB/x94Lxrdu/13/

Answer 2

使用拖动事件来控制边界，这是我认为最简单的方法。

下面是一个演示jsFiddle

在评论中考虑@Roko C. Buljan的建议，以处理窗口大小和图像动态上传，您最好有我们的右边界内拖动功能：

var images = document.getElementById('imgWrap');
var leftBoundary = 5; //5px for nice margin

$("#imgWrap").draggable({
    axis: "x",
    drag: function (event, ui) {
        var rightBoundary = window.innerWidth - images.clientWidth - 5; //right boundary
        if (ui.position.left > leftBoundary) ui.position.left = leftBoundary;
        else if (ui.position.left < rightBoundary) ui.position.left = rightBoundary;
    }
});

和一小笔额外的动画