如何检测可拖拽div碰撞并移除相邻边框实现单边框效果？

问题场景 #

所有元素均通过jQuery UI实现了可拖拽（draggable）功能，并带有吸附（snap）效果。每个div都设置了边框，因此当两个div相邻时会出现双边框。jQuery UI的吸附函数可识别哪些div正在相互吸附，但无法判断具体是哪一侧吸附。需要检测哪些div发生了碰撞，从而移除其中一个div的边框，使相邻div之间呈现单边框。

解决方案思路 #

这个问题我之前也碰到过，核心是要自己实现元素相邻边的检测——毕竟jQuery UI的snap只负责完成吸附动作，不会暴露具体的碰撞方向。下面是一套可行的实现思路：

• 监听拖拽的drag和stop事件，每次元素位置变化时触发相邻检测
• 编写碰撞检测逻辑，判断两个元素是否在上、下、左、右某一侧紧密相邻（距离小于等于边框宽度）
• 根据检测结果，移除相邻边的其中一个元素的边框；当元素不再相邻时，恢复所有边框

具体代码实现 #

HTML结构

<div class="draggable-box">Box 1</div>
<div class="draggable-box">Box 2</div>
<div class="draggable-box">Box 3</div>

CSS样式

.draggable-box {
  width: 150px;
  height: 150px;
  border: 2px solid #333;
  background: #f5f5f5;
  padding: 10px;
  position: absolute;
  cursor: move;
}

/* 用于临时隐藏边框的类 */
.border-hidden-top { border-top: none !important; }
.border-hidden-right { border-right: none !important; }
.border-hidden-bottom { border-bottom: none !important; }
.border-hidden-left { border-left: none !important; }

JavaScript逻辑

$(function() {
  // 初始化可拖拽元素，开启吸附功能
  $('.draggable-box').draggable({
    snap: '.draggable-box',
    snapMode: 'inner',
    drag: checkAdjacentBoxes,
    stop: checkAdjacentBoxes
  });

  function checkAdjacentBoxes() {
    // 先恢复所有元素的边框，避免残留隐藏状态
    $('.draggable-box').removeClass([
      'border-hidden-top', 
      'border-hidden-right', 
      'border-hidden-bottom', 
      'border-hidden-left'
    ]);

    var boxes = $('.draggable-box');
    var borderWidth = parseInt(boxes.first().css('border-width'));

    // 遍历所有元素对，检测相邻关系
    boxes.each(function(index, box1) {
      var $box1 = $(box1);
      var pos1 = $box1.position();
      var width1 = $box1.width();
      var height1 = $box1.height();

      boxes.slice(index + 1).each(function(_, box2) {
        var $box2 = $(box2);
        var pos2 = $box2.position();
        var width2 = $box2.width();
        var height2 = $box2.height();

        // 检测右侧相邻：box1的右边靠近box2的左边
        if (Math.abs((pos1.left + width1) - pos2.left) <= borderWidth) {
          // 检查垂直方向是否有重叠（避免边角误判）
          var overlapTop = Math.max(pos1.top, pos2.top);
          var overlapBottom = Math.min(pos1.top + height1, pos2.top + height2);
          if (overlapBottom > overlapTop) {
            $box1.addClass('border-hidden-right');
            $box2.addClass('border-hidden-left');
          }
        }

        // 检测左侧相邻：box1的左边靠近box2的右边
        if (Math.abs(pos1.left - (pos2.left + width2)) <= borderWidth) {
          var overlapTop = Math.max(pos1.top, pos2.top);
          var overlapBottom = Math.min(pos1.top + height1, pos2.top + height2);
          if (overlapBottom > overlapTop) {
            $box1.addClass('border-hidden-left');
            $box2.addClass('border-hidden-right');
          }
        }

        // 检测底部相邻：box1的底部靠近box2的顶部
        if (Math.abs((pos1.top + height1) - pos2.top) <= borderWidth) {
          var overlapLeft = Math.max(pos1.left, pos2.left);
          var overlapRight = Math.min(pos1.left + width1, pos2.left + width2);
          if (overlapRight > overlapLeft) {
            $box1.addClass('border-hidden-bottom');
            $box2.addClass('border-hidden-top');
          }
        }

        // 检测顶部相邻：box1的顶部靠近box2的底部
        if (Math.abs(pos1.top - (pos2.top + height2)) <= borderWidth) {
          var overlapLeft = Math.max(pos1.left, pos2.left);
          var overlapRight = Math.min(pos1.left + width1, pos2.left + width2);
          if (overlapRight > overlapLeft) {
            $box1.addClass('border-hidden-top');
            $box2.addClass('border-hidden-bottom');
          }
        }
      });
    });
  }
});

代码说明 #

1. 初始化拖拽：开启snap吸附模式，绑定drag和stop事件触发检测函数，确保拖拽过程中和结束后都能实时更新边框状态
2. 边框重置：每次检测前先恢复所有元素的边框，避免之前的隐藏状态残留
3. 碰撞检测：通过计算元素的位置和尺寸，判断是否在某一侧相邻，同时检查垂直/水平方向的重叠（避免边角误判为相邻）
4. 动态控制边框：给相邻元素添加对应的隐藏边框类，实现单边框效果

这个方案可以精准检测元素的相邻边，完美解决双边框的问题，而且和jQuery UI的吸附功能兼容良好。

内容的提问来源于stack exchange，提问作者MarcelWeidum