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。
现在,弄清楚如果所有窗口都被填充,如何创建一个弹出窗口。