Skip to main content
6 de 7
removeu 105 caracteres do conteúdo
user avatar
user avatar

Alinhamento para esquerda com detecção de colisão de elementos

Critérios de alinhamento:

  • Alinhar a esquerda a partir do elemento com menor valor de 'left'.
  • Elementos com colisão devem permanecer ao lado do elemento colidido.

No exemplo acima o algoritmo busca o elemento mais a esquerda em referência aos outros elementos e armazena sua posição, em seguida busca alinhar todos os outros elementos a partir do dado armazenado.

 arrayTopValue = [];
 arrayLeftValue = [];
 arrayLeftOriginal = [];
 arrayWidth = [];
 arrayHeight = [];
 arrayIdDivs = [];
 arrayAboutDivCollision = [];

$("#boxExample").children().each(function() {
//top
var position = $(this).css("top").indexOf("px");
var res = $(this).css("top").substr(0, position);
arrayTopValue.push(parseInt(res));


//left
var position = $(this).css("left").indexOf("px");
var res = $(this).css("left").substr(0, position);
arrayLeftValue.push(parseInt(res));
arrayLeftOriginal.push(parseInt(res));
arrayLeftValue.sort(function(a, b) {
  return a - b
});

//width
var position = $(this).css("width").indexOf("px");
var res = $(this).css("width").substr(0, position);
arrayWidth.push(parseInt(res));


//height
var position = $(this).css("height").indexOf("px");
var res = $(this).css("height").substr(0, position);
arrayHeight.push(parseInt(res));


//idDivs
var tempIds = $(this).attr("id");
arrayIdDivs.push(tempIds);

});

Como o algoritmo sabe que vai colidir ou não? Para saber isso o algoritmo checa se o elemento que vai alinhar a esquerda, está acima do elemento armazenado:

          if (distTopPlusHeightRefNext < distTopRef) 
          {
            $("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
          });

Se o elemento está acima, ele aplica a posição left armazenada, para o elemento que vai ser alinhado a esquerda.

O mesmo acontece se o elemento para ser alinhado está abaixo do elemento armazenado.

if (distTopRefNext > distTopPlusHeightRef) 
{
    $("#" + arrayIdDivsFolllow[i]).css({'left': arrayLeftValue[0] + "px"
});

Então quando essas duas opções anteriores não são possíveis de alinhar, significa que o elemento vai colidir.

if (distTopPlusHeightRefNext > distTopRef && distTopRefNext < distTopPlusHeightRef) {
    var tempValue = marginLeftPlusWidthRef;
    tempValue = tempValue + 3; //Espaço entre os elementos em pixel
    $("#" + arrayIdDivsFolllow[i]).css({'left': tempValue + "px"
    });

Uma vez que o elemento vá colidir, os valores de referência precisam estar atualizados, para que o elemento possa alinhar a partir do elemento mais próximo. Ex: getValDivs().

Mas existe um erro porque a div1 não está colidindo com a div3, como pode ser visto em https://fiddle.jshell.net/43jwxh35/ como quando também dois elementos tem a mesma posição gera um bug de alinhamento, alguém poderia me dizer o que esta errado? Grato

user31050
  • 440
  • 4
  • 12