jquery ui constrain draggable element inside smaller container

Question

I'm trying to drag an <img> inside a container that has fixed width and height. I already searched on SO and found this but it does not work for me.

Here it is a fiddle of what I'm trying to achieve; there is a container which is the only part of the image I want the user to show, and a draggable image under it. It has to be constrained in the .container element depending on the orientation of the image and the container must include always a part of the image, never a blank part, in other words the image's borders must always stay inside the container.

I tried to work with the containment property, but I don't understand how does the Array option works ( http://api.jqueryui.com/draggable/#option-containment ).

Answer 1

$("img").draggable({
     containment: "parent" 
   });

and remove .active