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

现在弄清楚如何在所有窗口都已填满的情况下创建弹出窗口。