使用jQuery draggable进行超过2个div的碰撞检测？

Question

这是一个小提琴;

http://jsfiddle.net/dh4qysej/

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

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 首先使用类选择器而不是使用id绑定事件。
2. 使用标记检查用户当前是否正在拖动任何可拖动项目。
3. 遍历所有可拖动项目并测试相对于当前拖动元素的碰撞。
＆＃13;
＆＃13;
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();
＆＃13;
#div1 {
  width: 200px;
  height: 50px;
  background-color: pink;
}
#div2 {
  width: 200px;
  height: 50px;
  background-color: green;
}
#div3 {
  width: 200px;
  height: 50px;
  background-color: red;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;