обнаружение столкновения на более чем 2 divs с jQuery draggable?

Question

Вот скрипка;

http://jsfiddle.net/dh4qysej/

Я ищу, чтобы сделать это с помощью динамически создаваемых элементов, поэтому дивы не может на самом деле еще существует, когда функция вызывается.

Я хотел бы попытаться разработать решение, которое могло бы покрыть х количество div и обрабатывать его с минимальным кодом, но сделать лоскутную версию для размещения трех divs, кажется, является логическим первым шагом, прежде чем выяснять способ покрытия даже больше.

Я полагал, что мне пришлось бы указывать if-else if, чтобы обнаруживать вычисления по всем переменным, однако, похоже, это не работает. Я надеялся, что кто-то может указать мне в правильном направлении?

Заранее спасибо - код ниже (работает между двумя первыми двумя);

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

1. Во-первых, вместо того, чтобы использовать идентификатор, чтобы связать события с помощью селектора класса.
2. Используйте флаг, чтобы проверить, не перетаскивает ли пользователь какой-либо перетаскиваемый элемент.
3. Прокрутите все перетаскиваемые элементы и испытайте столкновение относительно текущего перетаскиваемого элемента.

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>