Question

我正在处理照片库 基本上，我想要的是：一些照片（数量应该是动态可调的！）内嵌定位，离开窗户的视野。
页面本身不应该是可滚动的，但您可以通过拖动来“滚动”图像。由于我之前使用过{strong> jQuery UI 中的.draggable并且它的效果非常出色和高效，我以为我会继续使用它。
让它成为可拖动的工作非常好。

我的问题：我可以在任何地方移动我的画廊：我可以将它拖到屏幕外，我可以放在屏幕中间等等。我宁愿无法将我的内容拖出视口。（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

Answer 2

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

以下是演示jsFiddle

考虑@Roko C. Buljan建议在评论中处理窗口resije和图像动态上传你最好让我们的右边界内部拖动功能：

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;
    }
});

a little bonus with kind of animation

可拖动的图库 - 超出视口问题

2 个答案: