Javascript 可拖动图库-视口外问题

我正在制作小照片库
基本上，我想要的是：一些照片（数量应该可以动态调整！）内联定位，从窗口的视图中消失。
页面本身不应该是可滚动的，但是您可以通过拖动图像来“滚动”图像。 由于我以前使用过jQuery UI中的

.draggable

，而且它运行得出奇地好，性能也很好，我想我还是继续使用它吧。
只要让它可以拖动就行了

我的问题：< /强>我可以随意移动我的图库：我可以把它拖到屏幕外，我可以在屏幕中间放过，等等。 我希望不能将我的内容拖出视口。（这是一个很好的例子。虽然它不是用.draggable制作的，但它是用裸JS制作的）。 HTML:

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

JS:

JSFiddle： （我尝试了.draggable提供的“包容”和“捕捉”功能，但都不起作用。）

---

提前非常感谢你们！非常感谢您的帮助。使用拖动事件控制边界，这是我认为最简单的方法

这是一个演示

请考虑评论中的@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;
    }
});

var images=document.getElementById（'imgWrap'）；
var leftBoundary=5//5px，利润丰厚
美元（“#imgWrap”）。可拖动({
轴：“x”，
拖动：函数（事件、ui）{
var rightbundary=window.innerWidth-images.clientWidth-5；//右边界
如果（ui.position.left>leftBoundary）ui.position.left=leftBoundary；
如果（ui.position.left

---

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

这是一个演示

请考虑评论中的@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;
    }
});

var images=document.getElementById（'imgWrap'）；
var leftBoundary=5//5px，利润丰厚
美元（“#imgWrap”）。可拖动({
轴：“x”，
拖动：函数（事件、ui）{
var rightbundary=window.innerWidth-images.clientWidth-5；//右边界
如果（ui.position.left>leftBoundary）ui.position.left=leftBoundary；
如果（ui.position.left

---

并且

您只需设置包容属性：

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

安全壳内的值表示：

[X1，Y1，X2，Y2]

如果您不想使用

协作

，而是添加一些动态和动画：

---

您只需设置包含属性：

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

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

安全壳内的值表示：

[X1，Y1，X2，Y2]

如果您不想使用

协作

，而是添加一些动态和动画：

---

您应该将函数返回的

rightBoundary

值括起来，这样在调整窗口大小时，代码不会中断，而是保留新值。：D只是没有时间编写帧动画。所以算了吧：）就像冠军一样！非常感谢你！我会选择Roko C.的答案，因为它比较短。谢谢我投票支持Roko的ansver，因为它是做你想做的事情的更正确的方式。所以你做了正确的事！祝你好运您应该将函数返回的

rightBoundary

值括起来，这样在调整窗口大小时，代码不会中断，而是保留新值。：D只是没有时间编写帧动画。所以算了吧：）就像冠军一样！非常感谢你！我会选择Roko C.的答案，因为它比较短。谢谢我投票支持Roko的ansver，因为它是做你想做的事情的更正确的方式。所以你做了正确的事！祝你好运哇，太谢谢你了！听起来很有道理。像冠军一样工作！哇，太谢谢你了！听起来很有道理。像冠军一样工作！

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