Question

我正在尝试将图像嵌套在div中，并使其在此div内的X轴上可拖动。

Here's a jsFiddle to illustrate my point

我希望蓝色框在用户到达其左/右边缘时停止拖动，他不应该再看到任何红色包装。

想象一下，蓝色框是一个非常宽的图像，我希望能够将其从左侧拖动到右侧，而不会超出其宽度。这意味着当您到达其左边缘时无法将其拖动到右侧，并且当您到达其右侧时无法将其拖动到左侧。

简而言之，当您到达图像的边缘时，您无法再拖动它。

我该如何设置这种行为？

我尝试过玩containment，但我无法达到我想要的效果。

感谢您的帮助。

HTML：

<div id="wrapper">
    <p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>    
</div>

CSS：

#wrapper {
    width: 800px;
    height: 400px;
    background-color : red;
    overflow: hidden;
    cursor: w-resize;
}

#timeline {
    width: 2000px;
    height: 400px;
    margin: 0 auto;
    background-color: blue;
}

JS：

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

Answer 1

使用containment选项是正确的，但您需要传递坐标数组以约束draggable。

根据jQuery UI docs，containment选项可以采用格式为[x1, y1, x2, y2]的数组。在你的情况下，y值是无关紧要的，因为你已经将draggable约束到x轴，所以你可以简单地传入0。

对于x值，0将适用于x1，因为图像已经在右边缘开始。对于x2，您需要使用：

(width of parent - width of image)

所以

(800 - 2000) = -1200

因此，您可以将以下内容传递给containment选项：

containment: [-1200, 0, 0, 0]

直播示例 - http://jsfiddle.net/LMXLj/

使用左/右约束拖动div中的图像

1 个答案: