Drag an image within a div with left/right constraints

Question

I'm trying to nest an image in a div and make it draggable on the X axis within this div.

Here's a jsFiddle to illustrate my point

I'd like the blue box to stop dragging once the user reaches its left/right edges, he shouldn't be able to see any of the red wrapper anymore.

Imagine the blue box is a very wide image, I want to be able to drag it from its left side to its right side without exceeding its width. It means you can't drag it to the right when you reached its left edge, and you can't drag it to the left when you reached its right side.

In a nutshell, when you reach the edges of the image, you can't drag it any more.

How can I set that kind of behavior ?

I tried playing with containment but I couldn't achieve what I wanted.

Thanks for your help.

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

the question seems to be unclear, when the screen is completely covered with blue wrapper, red is not visible at all. Could you please explain more about the situation — Dhiraj, Jun 06 '12 at 18:36
Well yes indeed, it is completely covered. Yet if you drag the blue box to the right, it reveals the red wrapper. Same thing if you drag it all the way to the left. What I want to do is to prevent this behavior. I edited my original post. — morgi, Jun 06 '12 at 19:16

TJ VanToll · Accepted Answer · 2012-06-07T15:36:47.143

2

You were correct to use the containment option but you'll want to pass in array of coordinates to constrain the draggable.

Per the jQuery UI docs the containment option can take an Array in format [x1, y1, x2, y2]. In your case the y values are irrelevant because you are already constraining the draggable to the x axis, so you can simply pass in 0.

For the x values 0 will work for x1 since the image is already starting on the right edge. For x2 you'll need to use:

(width of parent - width of image)

So

(800 - 2000) = -1200

Therefore you can pass the following in for the containment option:

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

Live Example - http://jsfiddle.net/LMXLj/

edited Jun 07 '12 at 15:36

answered Jun 07 '12 at 02:11

TJ VanToll

12,584
4
43
45

I actually need the opposite behavior. From its initial position (x = 0) the image should only be draggable to the left. It might be easier to see what I mean with an image instead of a blue `
` : http://jsfiddle.net/morgi/Rqm3c/
– morgi Jun 07 '12 at 07:23
Gotcha. The ```containment``` approach with coordinate values is still the way to go; you're just going to need different values for x1 and x2, in this case you'll need some negative values to get this working. I'll try messing with the numbers later to see if I can come up with the right values. – TJ VanToll Jun 07 '12 at 12:23
I updated my answer with the appropriate values per your comments. – TJ VanToll Jun 07 '12 at 15:37

Drag an image within a div with left/right constraints

1 Answers1