用边框制作多个div的单个边框

Question

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

每个 div 都有一个边框，所以如果两个 div 彼此分开，它就会有一个双边框。在 jquery-ui 的对齐功能中，您可以看到哪些 div 正在相互对齐，但不是在哪一侧。

我如何检查哪些 div 发生了碰撞，以便我可以删除 1 div 的边界，使其成为 div 之间的单一边界？

Answer 1

您可以执行此操作，调整每个 <DIV> 以显示为 table 的一部分。这有点复杂。如前所述，您可以调整为仅使用 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)?

用边框制作多个div的单个边框

Make single border of multiple divs with borders

html

css

jquery

jquery-ui

jquery-ui-draggable