jquery draggable - 对当前元素大小的相对包含答案

【问题标题】：jquery dragable - relative containmet to current elemente sizejquery draggable - 对当前元素大小的相对包含
【发布时间】：2016-01-26 23:31:28
【问题描述】：

我对容器有一点问题，我希望它与当前元素有一个相对大小。容器中没有固定数量的元素，它们可以缩放和旋转。元素应允许部分放置在容器外，至少 10% 的元素应在容器内。

我尝试使用$(this) 来获取所选元素的尺寸，但这似乎与窗口有关。对于右侧和左侧，这应该始终有效，但左侧和顶部仅在所有元素具有相同尺寸的情况下才有效。

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
             ],

这里有一个小插曲： example

【问题讨论】：

标签： javascript jquery jquery-ui draggable containment

【解决方案1】：

我使用 $.each 来单独设置包含字段。我想您可以在可拖动的stop 函数上递归调用自身。

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

【讨论】：