jQuery ड्रैगगेबल के साथ 2 से अधिक divs पर टकराव का पता लगाने?

Question

यहां एक पहेली है;

http://jsfiddle.net/dh4qysej/

मैं डायनामिक रूप से तैयार तत्वों के साथ यह करने के लिए देख रहा हूँ, इसलिए divs वास्तव में अभी तक मौजूद नहीं हो सकता है जब समारोह कहा जाता है।

मैं ऐसे समाधान को हल करने का प्रयास करना चाहता हूं जो एक्स की मात्रा को कवर कर सकता है और इसे न्यूनतम कोड के साथ संभाल सकता है, लेकिन तीन divs को समायोजित करने के लिए एक स्क्रैपी संस्करण बनाना कवर करने का तरीका ढूंढने से पहले तार्किक पहला कदम प्रतीत होता है और भी अधिक।

मुझे लगा कि मुझे यह करना होगा कि अगर अन्य सभी चरों में गणना का पता लगाने के लिए बयान, हालांकि यह काम नहीं कर रहा है। मैं उम्मीद कर रहा था कि कोई मुझे सही दिशा में इंगित कर सकता है?

अग्रिम धन्यवाद - नीचे कोड (पहले दो divs के बीच काम करना);

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>