Come creare un layout griglia dinamico personalizzabile usando CSS e JavaScript?

Question

Sto lavorando a un progetto che richiede molto CSS. Il cliente desidera avere un layout di griglia sulla home page in cui desidera essere in grado di riordinare i componenti dell'interfaccia utente con il drag and drop. Questi componenti dell'interfaccia utente potrebbero essere di dimensioni diverse: 1x1, 2x2 e 3x3. Quando faccio cadere un elemento dell'interfaccia utente nella nuova posizione desiderata, devo mettere da parte gli altri componenti. Eventuali buchi dovrebbero essere riempiti con componenti 1x1.

How it should work

1. Prima ho draged un componente
2. trascinando il componente 2x2
3. Lasciando il componente nel mezzo, i due componenti 1x1 fare spazio e si adattano intorno al 2x2

Si noti che la dimensione della griglia non è limitata a 8 1x1, ma l'altezza e la larghezza di essa dovrebbero essere espandibili e ridotte.

Preferisco non usare tabelle ma a parte questo sono aperto a suggerimenti. In questo momento ho appena usato div inline-block che posso trascinare e rilasciare per cambiare gli oggetti jQuery DOM. L'effetto non è esattamente quello che desidera il cliente: How it is now

Answer 1

Ho creato molti layout dinamici con la stessa idea. È necessario pensare di più al modo in cui il comportamento del float da blocco a blocco si ferma per i blocchi successivi, in modo che si riposizionino correttamente come desiderato. Quindi per definire un elemento float-stop è necessario. I blocchi funzioneranno con float:left forse float:right. Ad un certo punto si capire che questo comportamento deve finire da qualche parte meglio farlo con CSS

.floatstop { 
    clear: both; //the important code here.. 
    width: 100%; 
    height: 1px; 
    line-height: 1px; 
    margin-top:-1px; 
} 

e Html

<div class="floatstop"></div> 

Realizzato in tutti i blocchi che hanno bisogno di frontiera al blocco successivo sul lato sinistro (forse anche sul lato destro) devi definire un layout di base che abbia spazio anche per il blocco posizionato in modo corretto, con lo spazio per i bordi, altrimenti sarebbe in grado di fluttuare sotto il blocco precedente.

Ma c'è un modo più moderno! Puoi usare i codici CSS3 per definire il tuo layout.

.columnblock { 
    width: 100%; 
    column-gap: 30px; 
    // for symmetric columned layouts use.. 
    column-count: 3; 
    // or for not symmetric layouts use.. 
    column-width: 280px; 
} 

<div class="columnblock"> 
    <p>Lorem Ipsum</p> 
    <p>another Paragraph</p> 
</div> 

ci altre cose per citare qui, ma si può leggere su http://www.w3schools.com/css3/css3_multiple_columns.asp