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

下面是我正在使用的代码示例。它适用于较大尺寸，但它打破了小尺寸的盒子。我不知道为什么在移除调整大小的框时会移动它们，但在我正在处理的实际项目中却没有发生这种情况。需要这些框，它们实际上是项目中的svg，以填充较大框的宽度，而不是以奇怪的方式杂乱无章或附加

另外，当所有框都填满时，是否仍要触发事件

HTML

JS

---

我所需要做的就是增加耐性

现在，了解如何在所有窗口都已填满的情况下创建弹出窗口

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

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

$(".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});



 }
 });