所有元素都是可拖动的 (jquery-ui),带有 snap功能。
每个 div 都有一个边框,所以如果两个 div 彼此分开,它就会有一个双边框。在 jquery-ui 的 snap 函数中,您可以看到哪些 div 正在相互对齐,但不是在哪一侧。
如何检查哪些 div 发生了冲突,以便删除 1 个 div 的边框,使其成为 div 之间的单一边框?
最佳答案
您可以对每个 <DIV>
进行调整作为表格的一部分显示。这有点复杂。如前所述,您可以调整为仅使用 margin: -1px;
我也很喜欢 box-shadow
建议。一个例子:
$(function() {
$(".drag").draggable({
containment: "parent",
handle: ".drag-handle",
snap: true
});
$(".drag-handle").each(function(ind, el) {
var $par = $(el).parent();
$(el).position({
my: "right top",
at: "right-5 top+5",
of: $par
});
});
});
.canvas {
border: 2px solid #000;
display: inline-block;
border-collapse: collapse;
width: 440px;
height: 300px;
}
.drag {
/*
border: 1px solid #000;
*/
box-shadow: 1px 0px #000, 0px 1px #000, 1px 1px #000, 1px 0px #000 inset, 0px 1px #000 inset;
float: left;
}
.drag label {
margin: 2px;
}
.drag .drag-handle {
border-radius: 6px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="canvas ui-widget">
<div id="item-1" class="drag" style="width: 100%; height: 90px;">
<label>DIV 1</label>
<span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
</div>
<div id="item-2" class="drag" style="width: 50%; height: 60px;">
<label>DIV 2</label>
<span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
</div>
<div id="item-3" class="drag" style="width: 50%; height: 60px;">
<label>DIV 3</label>
<span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
</div>
<div id="item-4" class="drag" style="width: 100%; height: 80px;">
<label>DIV 4</label>
<span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
</div>
</div>
改编自此处看到的答案:How to make borders collapse (on a div)?
关于jquery - 用边框制作多个div的单个边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50291513/