使用边框创建多个div的单边框

Question

所有元素都是可拖动的（jquery-ui），具有snap功能。

每个div都有一个边框，所以如果两个div相互分开，它将有一个双边框。在jquery-ui的snap功能中，您可以看到哪些div正在相互捕捉但不在哪一侧。

如何检查哪个div正在碰撞，这样我就可以删除1 div的边框，这样它就会成为div之间的一个边框？

Answer 1

您可以调整每个<DIV>以显示为表格的一部分。这有点复杂。如上所述，您可以调整为仅使用margin: -1px;我也非常喜欢box-shadow建议。一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

改编自此处的答案：How to make borders collapse (on a div)?