jQuery UI Draggable issue with containment option

Question

I'm trying to have an image inside a div of same width to be draggable in the limit of the div. It's difficult to explain but one side of the image (top or bottom) can leave the div but you cannot have a gap between the edge of the image and the border of the div.

To resume the image has the same width of the parent div but its height is bigger so a part of the image is hidden.

Well here is what I want to do: http://jsfiddle.net/maxwell2022/DerNa/165/

It's working perfectly... because there is nothing above the div. If there is a gap between the document and the div, it's not working anymore. I think Draggable is taking the document as reference for the top of the image. As soon as you start dragging the image, the image move and stuck its top edge to the top of the document:

http://jsfiddle.net/maxwell2022/DerNa/164/

I don't know how I can achieve this with the containment option. Cheers,

Maxime

UPDATE

Another attempt with relative positioning but no luck: http://jsfiddle.net/maxwell2022/DerNa/166/

Answer 1

I found a solution to fix it getting the top position of the parent div using offset() and add it to the containment boundary. I'm not sure it's the best solution but it looks like it's working.

I just have a difference of 1% in the offset at the top which is quite annoying: if you drag the image and make it stick to the top as much as possible it returns 99% offset instead of 100% (see the result in the console).

The bottom one is correct (0%). I think it's due to rounding the size but I'm not sure. Here is the jsfiddle: http://jsfiddle.net/maxwell2022/DerNa/167/

If you have a better idea please, please, let me know.

Thanks, Maxime