jQuery UI捕捉到元素，然后调整大小以适合容器

Question

https://jsfiddle.net/tk48ecxb/24/

下面是我正在使用的代码的一个示例。它在较大的尺寸下工作得相当好，但它打破了小尺寸的盒子。不确定为什么要在删除调整大小的框时移动它们，这在我正在工作的实际项目中不会发生。我需要的盒子，这实际上是svg的项目，以填补较大的盒子的宽度，而不是真正的起伏或以奇怪的方式连接。

还有，当所有的方框都填满了的时候触发一个事件？

HTML

<div class="top-row">
<ul class="holderList">
    <li class="holder" id="large"></li>
    <li class="holder" id="medium"></li>
    <li class="holder" id="small"></li>
    <li class="holder" id="tiny"></li>
  </ul>
</div>

<div class="bottom-row">
  <ul>
    <li class="square" id="square1">
</li>
    <li class="square" id="square2"></li>
    <li class="square" id="square3"></li>
    <li class="square" id="square4"></li>
  </ul>
</div>

CSS

ul li{
 border: 1px solid black;
 display: inline-block;
}
.holderList > li{
 margin: 20px;
}

#large{
  height: 200px;
  width: 200px;

}
#medium{
  height: 150px;
  width: 150px;

}
#small{
  height: 100px;
  width: 100px;

}
#tiny{
  height: 50px;
  width: 50px;

}

.square{
  height: 60px;
  width: 60px;
  background: green;
}

JS

$(".square").draggable({
 drag: function(event, ui) {
     var draggable = $(this).data("ui-draggable");
     $.each(draggable.snapElements, function(index, element) {
         ui = $.extend({}, ui, {
             snapElement: $(element.item),
             snapping: element.snapping
         });
         if (element.snapping) {
             if (!element.snappingKnown) {
                 element.snappingKnown = true;
                 draggable._trigger("snapped", event, ui);
             }
         } else if (element.snappingKnown) {
             element.snappingKnown = false;
             draggable._trigger("snapped", event, ui);
         }
     });
 },
 snap: ".holder",
 snapMode: "inner",
 snapped: function(event, ui) {
     var squareWidth = ui.snapElement.width();
     var squareHeight = ui.snapElement.height();


     ui.helper.css({width: squareWidth, height: squareHeight});



 }
 });

Answer 1

显然，我需要做的就是添加snapTolerance。

现在来看看如何在所有窗口都被填满的情况下创建弹出窗口。