我正在尝试将图像嵌套在 div 中,并使其可在此 div 内的 X 轴上拖动。
一旦用户到达它的左/右边缘,我希望蓝色框停止拖动,他应该再也看不到任何红色包装。
想象一下蓝色框是一个非常宽的图像,我希望能够将它从左侧拖到右侧而不超出其宽度。这意味着当你到达它的左边时你不能把它拖到右边,当你到达它的右边时你不能把它拖到左边。
简而言之,当你到达图像的边缘时,你不能再拖动它了。
我该如何设置这种行为?
我试着玩,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"
});