A criação de layouts dinâmicos no estilo Pinterest, com suporte a arrastar e soltar, pode ser simplificada utilizando o plugin jQuery Shapeshift. Esta ferramenta organiza elementos em um sistema de grade de colunas, permitindo a reordenação visual através de drag-and-drop, mantendo a integridade do índice lógico para renderização precisa.

Principais Recursos

• Arranjo por Arraste: Modifique a posição dos nós no DOM arrastando-os fisicamente.
• Adaptabilidade: A grade se reorganiza automaticamente em resposta a alterações nas dimensões da janela de visualização.
• Variação de Largura: Itens podem ocupar múltiplas colunas através de configurações simples de CSS.
• Compatibilidade Tátil: Funciona perfeitamente em dispositivos móveis quando combinado com jQuery Touch Punch.

Implementação Básica

Para iniciar, é necessário incluir as bibliotecas jQuery e jQuery UI em seu projeto, além dos arquiovs do plugin.

<!-- Dependências base -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- Suporte para toque -->
<script src="vendor/jquery.touch-punch.min.js"></script>

<!-- Núcleo do Shapeshift -->
<script src="core/jquery.shapeshift.js"></script>

Em seguida, estruture o contêiner HTML que servirá como base da grade:

<div class="grid-wrapper">
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
  <div class="grid-cell"></div>
</div>

Defina o CSS necessário para o posicionamento absoluto dos itens e estilização do contêiner:

.grid-wrapper {
  position: relative;
  border: 1px solid #e0e0e0;
}

.grid-cell {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: #4a90e2;
}

/* Estilo do marcador durante o arraste */
.grid-wrapper .ss-placeholder-child {
  background-color: transparent;
  border: 2px dashed #50e3c2;
}

Ative o plugin selecionando o contêiner principle:

$(function() {
  $(".grid-wrapper").shapeshift();
});

Configurações Avançadas

O layout pode ser refinado ajustando espaçamentos e margens internas:

$(".grid-wrapper").shapeshift({
  gutterX: 15, // Espaçamento horizontal entre colunas
  gutterY: 15, // Espaçamento vertical entre linhas
  paddingX: 10, // Margem interna horizontal do contêiner
  paddingY: 10  // Margem interna vertical do contêiner
});

Para criar itens que ocupam mais de uma coluna, aplique uma classe CSS específica:

.large-cell {
  width: 255px !important; /* O dobro da largura padrão considerando o gutter */
}

Para permitir a movimentação de elementos entre diferentes contêineres:

<div class="grid-wrapper" id="zone-a"></div>
<div class="grid-wrapper" id="zone-b"></div>

<script>
  $("#zone-a, #zone-b").shapeshift({
    dragBetweenContainers: true
  });
</script>

Dicas de Operação

Ao inserir novos elementos dinamicamente na grade, atualize a renderização chamando o método de recarga:

$('.grid-wrapper').append('<div class="grid-cell"></div>').shapeshift('reload');

O monitoramento de redimensionamento da janela é ativo por padrão. O atraso para a reorganização pode ser ajustado:

$(".grid-wrapper").shapeshift({
  resizeDelay: 250 // Milissegundos de espera após o redimensionamento
});

Eventos de arraste podem ser capturdaos para executar lógicas personalizadas:

$(".grid-wrapper").on("ss-rearranged", function(event, target) {
  console.log("Item movido com sucesso.");
});