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



 }
 });

最佳答案

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

现在,弄清楚如果所有窗口都被填充,如何创建一个弹出窗口。

09-10 01:23
查看更多