jquery dragable - relative containmet to current elemente size

Question

I have a little problem with the containment, I want it to have a relative size to the current element. There is no fix amount of elemtens in the container and they can be scaled and rotated. The elements should be allowed to be placed partially outside the container, at least 10% of the element should be inside.

I tried to work with $(this) to get the diemensions of the selected element, but it seems that this relates to the window. For the right and left side, this should always work, but the left and the top side would only work, if all elements had the same dimension.

containment: [//"#container",
                $("#container").offset().left*0.7,
                $("#container").offset().top*0.2,
                $("#container").width() + $("#container").offset().left*0.95,
                $("#container").height() + $("#container").offset().top*0.9
             ],

Here is a little plunk: example

Answer 1

I use $.each to individually set the containment field. I would imagine that you can recursively call on itself on draggable stop function.

http://plnkr.co/edit/McjFd5CQISlWpBA93BJC?p=preview

$('.ui-draggable').each(function(){
    $elem = $(this);
    var contain = [
          $elem.offset().left,
              $elem.offset().top,
              $elem.width() + $elem.offset().left,
              $elem.height() + $elem.offset().top
        ];
    $elem.draggable({
      containment:contain,
      scroll:false
    })
  })