Как проверить стоят ли рядом блоки (в системе координат)?

Question

[Kusmich]

Есть, функия которая создает, блоки в разном количестве(колиествво всхгда чётное).

Как узнать находиться ли блоки рядом в системе координат , по координатам top, left ?

В примере ниже есть 4 блоки, которые разположены, рядом друг с другом, нужно к примеру алертом вывести какой блок рядом с каким расположен рядом. К примеру у меня 1 блок стоит с 3, и 4 с 2.

Вот как я пытался решыть :

<div class="rects" id="block_1">          </div>
  <div class="rects" id="block_2">          </div>
  <div class="rects" id="block_3">          </div>
  <div class="rects" id="block_4">          </div>

var rects = {};  
var checed_position = function(){   // --- функция проверки на совпадения
var t_left;                         // --- координаты елементов то левой стороны
var t_top;                          // --- координаты елементов от верху  
    
    
var create_mass = function (){   
$( ".rects" ).each(function(index, element) {
     rects[index] =  element;
     t_left =  $(element).offset().left;    
     t_top  = $(element).offset().top;
     console.log(t_top)
}); 
    
setTimeout(function(){
   $.each(rects, function(key, value) { 
if(t_top == $(value).offset().top){                                                          
    if(t_left == $(value).offset().left + 88  || t_left == $(value).offset().left - 88){     // --- вычисляем есть ли совпадения с какойто из сторон
        alert("Есть совпадения");
        console.log($(value));
    }
 }else{
      console.log("Нет совпадний");
      console.log($(value).offset().left)
 }        
 }); 
}, 10) 
   
    
 
}
create_mass(); 
  
}
checed_position();

#block_1,#block_2, #block_3, #block_4,  #block_5{
    width: 88px;
    height: 100px;
    margin: 50x;
    text-align: center;
    float: left;
    cursor: pointer;
    position: absolute;
}


#block_1 {
    background-color: #f443a1;
    left: 388px;
    top: 300px;
}


#block_2 {
    background-color: chartreuse;
    left: 500px;
    /* top: 200px; */
}


#block_3 {
    background-color: aqua;
    left:300px;
    top: 300px;
}


#block_4 {
    background-color: #5b00ff;
    left: 588px;
}

Но у меня совпадение одно, а должно быть так "block1 и block3 - cовпадают", "block2 и bloc4 - cовпадают"

Вот код на фидле: https://jsfiddle.net/24ox8bg1/2/

Кто такое уже делал, как можно решыть ?

Comments

[Dark Hole]

Жы-шы пишы от душы(через и)

[OVK2015]

t_left = $(element).offset().left;
t_top = $(element).offset().top;
там массивы должны быть. А так сравнение идет с координатами последнего блока

Answer 1

[Alex]

Советую сделать функцию для поиска более чистой. Примерно вот так:

function getDockedRect($target, searchSekector) {
    var $targetCoordinates = getCoordinates($target);
    var result = [];
    $(searchSekector).each(function (i, el) {
      var $el = $(el);
    	var coordinates = getCoordinates($el);
			
      isDokked = !!(coordinates.top === $targetCoordinates.bottom
                 || coordinates.bottom === $targetCoordinates.top
                 || coordinates.left === $targetCoordinates.right
                 || coordinates.right === $targetCoordinates.left);
      
      if (isDokked) result.push(el);
    });
    return result;
}

function getCoordinates($target) {
	  var coordinates = $target.offset();
    coordinates.bottom = coordinates.top + $target.height();
    coordinates.right = coordinates.left + $target.width();
		return coordinates;
}

В моём случае функция принимает два параметра: целевой элемент у которого хотим найти соседей и селектор для поиска всех потенциальных соседей. В дальнейшем эту функцию можно использовать примерно так:

$myBlock = $('#block_1');
  var dockIds = getDockedRect($myBlock, '.rects').map(el => $(el).attr('id'));
  alert('С #block_1 стоят рядом: ' + dockIds.join(','));