jQuery 可拖动的超过 2 个 div 的碰撞检测？

Question

这是一个fiddle;

我希望使用动态创建的元素来执行此操作，因此调用该函数时 div 可能实际上还不存在。

我想尝试制定一个解决方案，该解决方案可以覆盖 x 数量的 div 并用最少的代码处理它，但是制作一个零散的版本以容纳三个 div 似乎是找到一种方法之前合乎逻辑的第一步覆盖更多。

我想我必须加上 if - else if 语句才能检测所有变量的计算，但它似乎不起作用。我希望有人能指出我正确的方向？

提前致谢 - 下面的代码（在前两个 div 之间工作）；

function collision($div1, $div2, $div3) {
  if ($div1.length > 0) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
  }

  if ($div2.length > 0) {
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;
  }

  if ($div3.length > 0) {
    var x3 = $div3.offset().left;
    var y3 = $div3.offset().top;
    var h3 = $div3.outerHeight(true);
    var w3 = $div3.outerWidth(true);
    var b3 = y3 + h3;
    var r3 = x3 + w3;
  }

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
    return false;
  } else {
    return true;
  }
}


onmousemove = function(e) {
  $('#result').text(collision($('#div1'), $('#div2'), $("#div3")));
};


$('#div1,#div2, #div3').draggable();

#div1 {
  width: 200px;
  height: 50px;
  background-color: pink;
}
#div2 {
  width: 200px;
  height: 50px;
  background-color: green;
}
#div3 {
  width: 200px;
  height: 50px;
  background-color: red;
}

<strong>Drag divs around.</strong>

<div id="div1">
  Div1
</div>
<br/>
<div id="div2">
  Div2
</div>
<br>
<div id="div3">
  Div3
</div>

<p>Colliding? <span id="result">false</span>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Answer 1

首先不使用 id 来绑定事件，而是使用 class 选择器。
使用标志检查用户当前是否正在拖动任何可拖动项。
遍历所有可拖动项并测试与当前拖动元素的碰撞。

function collision(draggableItems) {
  return draggableItems
     .toArray()
    .reduce(function(isColliding, currNode){
        if(isColliding){return isColliding;}
        var $currNode = $(currNode);
        var x1 = $currNode.offset().left;
        var y1 = $currNode.offset().top;
        var h1 = $currNode.outerHeight(true);
        var w1 = $currNode.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        draggableItems.each(function(index, node){
          if(node == currNode || isColliding){
            return;
          }
          var $node = $(node);
          var x2 = $node.offset().left;
          var y2 = $node.offset().top;
          var h2 = $node.outerHeight(true);
          var w2 = $node.outerWidth(true);
          var b2 = y2 + h1;
          var r2 = x2 + w1;
                
          if(!(b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2)){
            isColliding = true;
          }
        });
        return isColliding;
  }, false);
}


    var isDragging = false;

    $('.draggableItem')
      .on('mousedown', function(e){
        isDragging = true;
      })
      .on('mousemove',function(e) {
        if(!isDragging){return;}
        $('#result').text(collision($('.draggableItem')));
      })
      .on('mouseup', function(e){
        isDragging = false;
      });

    $('.draggableItem').draggable();

#div1 {
  width: 200px;
  height: 50px;
  background-color: pink;
}
#div2 {
  width: 200px;
  height: 50px;
  background-color: green;
}
#div3 {
  width: 200px;
  height: 50px;
  background-color: red;
}

<strong>Drag divs around.</strong>

<div id="div1" class="draggableItem">
  Div1
</div>
<br/>
<div id="div2" class="draggableItem">
  Div2
</div>
<br>
<div id="div3" class="draggableItem">
  Div3
</div>

<p>Colliding? <span id="result">false</span>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

jQuery 可拖动的超过 2 个 div 的碰撞检测？

collision detection on more than 2 divs with jQuery draggable?

javascript

jquery

jquery-ui

collision-detection