1

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

1
  • Confesso que também não estou conseguindo contornar o problema rsrs. Você aceita um novo código? Commented 31/07/2016 às 16:30

1 Resposta 1

1

Como eu realmente tive dificuldade em manipular seu código, fiz uma outra opção, que, apesar de não ter tido tempo para testar muitas possibilidade de posições, acho que está funcionando direito e atendendo o que você pediu:

$(document).ready(function() {
  var leftList = []; // armazenará o left de todos os quadrados
  var minLeft; // receberá o menor left de todos os quadrados
  var topList = []; // armazenará o top de todos os quadrados
  var minTop; // armazenará o top de todos os quadrados
  var widthList = []; // armazenará o width de todos os quadrados
  var heightList = []; // armazenará o height de todos os quadrados
  var margin = 5; // espaçamentos entre os quadrados

  $('div').draggable(); // aplica o draggable a todos os quadrados, inclusive o grande

  function loadValues() { // carregará as variáveis supracitadas
    // loop que percorrerá todos o quadros
    $('#boxExample').children().each(function(i) { 
      var left = $(this).position().left; // captura o left do elemento em questão dentro do loop
      leftList[i] = left; // adiciona o left ao array
      var top = $(this).position().top; // captura o top 
      topList[i] = top; // adiciona o top ao array
      var height = $(this).height(); // captura o height 
      heightList[i] = height; // adiciona o height ao array
      var width = $(this).width(); // captura o width 
      widthList[i] = width; // adiciona o width ao array
    });
    minLeft = Math.min.apply(Math, leftList); // usa o Math.min em um array para retornar o menor left
    minTop = Math.min.apply(Math, topList); // retorna o menor top
  }

  function align() {
    loadValues(); // carrega a função passada
    // percorre novamente todos o quadros
    $('#boxExample').children().each(function(i) {
      loadValues(); // carrega os valores a cada mudança
      var thisLeft = leftList[i]; 
      // captura o left do elemento em questão usando o index do loop e aplicando ao array
      var thisTop = topList[i]; // faz o mesmo com o top
      var newLeft = minLeft; // deixa por padrão o left de cada elemento como sendo o menor
      var before = []; // array com as medidas dos quadros a esquerda do elemento em questão
      leftList.forEach(function(el, index) { // percorre o array de lefts
      // este primeiro if verifica a colisão somente em quadrados mais a esquerda que o em questão no primeiro loop
        if (el <= thisLeft && i != index) {
          // este verifica a colisão baseado no top
          if ((topList[index] >= thisTop && topList[index] <= thisTop + heightList[i]) || (topList[index] <= thisTop && topList[index] >= thisTop - heightList[index])) {
            // adiciona do before[] o left, o width e a margin, e subtrai o minLeft 
            before.push(el + widthList[index] - minLeft + margin);
          }
        }
      });
      // soma ao newLeft (que era por padrão o menor left) o maior valor do array before ou zero se ele for o elemento mais a esquerda
      newLeft += before.length == 0 ? 0 : Math.max.apply(Math, before);
      $(this).css({
        left: newLeft  // aplica o estilo
      })
    });
  }
  $('#btn2').click(function() {
    // este loop serve apenas para repetir a função várias vezes e o alinhamento funcione com eficácea
    $('#boxExample').children().each(function(i) {
      align();
    });
  });
})
#div1 {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px solid black;
  left: 334px;
  top: 240px;
}
#div2 {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 1px solid black;
  left: 198px;
  top: 41px;
}
#div3 {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px solid black;
  left: 222px;
  top: 170px;
}
#div4 {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  left: 86px;
  top: 106px;
}
#boxExample {
  position: relative;
  width: 460px;
  height: 360px;
  border: 1px solid black;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="boxExample">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
  <div id="div4">4</div>
</div>
<button id="btn2">goLeft</button>

Funções usadas:

1
  • @user31050, código comentado ;) Commented 3/08/2016 às 20:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .