3

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

这是一个 jsFiddle 来说明我的观点

一旦用户到达它的左/右边缘,我希望蓝色框停止拖动,他应该再也看不到任何红色包装。

想象一下蓝色框是一个非常宽的图像,我希望能够将它从左侧拖到右侧而不超出其宽度。这意味着当你到达它的左边时你不能把它拖到右边,当你到达它的右边时你不能把它拖到左边。

简而言之,当你到达图像的边缘时,你不能再拖动它了。

我该如何设置这种行为?

我试着玩,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"
});
4

1 回答 1

2

您使用该选项是正确的,containment但您需要传入坐标数组来约束draggable.

根据jQuery UI 文档,该containment选项可以采用 Array 格式[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/

于 2012-06-07T02:11:29.933 回答