Question

I have a small container and a large, variable-sized (the image is user-submitted) image inside it that I want to be draggable. I’m using jQuery UI’s “draggable” feature for vertical dragging and it works well, but the only problem I’m having is that you can drag the image far up or down enough so that its edges show and you can see blank space above or below it in the container. I want it to work so that when, for example, the bottom edge of the image hits the bottom border of the container, you can’t drag it up any further.

I’m trying to use the

{ containment:[x1, y1, x2, y2] } 

option to make this work, and after a lot of trial and error I can calculate the correct values for differently-sized images, but I can’t figure out a functional relationship between the image size and what the containment values. Can anyone help me out, or point me in the right direction as to what kind of relationship image size and containment should have? The container is a fixed size of 360×240. Thanks so much.

JSfiddle: http://jsfiddle.net/Ey74c/ I don’t want any of the white space within the container to show – i.e. you can’t drag the image far enough up or down to let that happen. I tried setting containment: “parent” and it no longer scrolls?

Answer 1

To solve this problem you should use: { containment:[x1, y1, x2, y2] }

$("#container img").draggable({
    containment: [(parseInt($("#myImage").width()) - parseInt($("#container").width())) * -1, 
                  (parseInt($("#myImage").height()) - parseInt($("#container").height())) * -1, 0, 0]
});

jsFiddle

x1 = – (img.width – container.width)

y1 = – (img.height – container.height)

x2 = 0

y2 = 0