Wie erstellt man ein anpassbares, dynamisches Rasterlayout mit CSS und JavaScript?

Question

Ich arbeite an einem Projekt mit viel CSS. Der Kunde möchte auf der Homepage ein Rasterlayout haben, in dem er UI-Komponenten per Drag and Drop neu anordnen kann. Diese UI-Komponenten können unterschiedliche Größen haben: 1x1, 2x2 und 3x3. Wenn ich ein UI-Element an der gewünschten neuen Position ablege, sollte es die anderen Komponenten beiseite schieben. Eventuelle Löcher sollten mit 1x1 Komponenten gefüllt werden.

How it should work

1. Bevor ich
2. Drop die Komponente in der Mitte, die beiden 1x1-Komponenten bilden Raum und passen rund um die 2x2

eine Komponente

draging die 2x2 Komponente draged haben

Beachten Sie, dass die Größe des Gitters nicht auf 8 1x1 beschränkt ist, aber die Höhe sowie die Breite des Gitters sollte möglich sein, zu erweitern und kleiner zu machen.

Ich werde lieber nicht Tabellen verwenden, aber ich bin offen für Vorschläge. Gerade jetzt habe ich Inline-Block-Divs verwendet, die ich per Drag & Drop verschieben kann, um die jQuery-DOM-Objekte zu wechseln. Der Effekt ist nicht ganz was der Kunde will: How it is now

Answer 1

Ich habe viele dynamische Layouts mit der gleichen Idee gemacht. Sie müssen mehr darüber nachdenken, wie Ihr Float-Verhalten von Block zu Block für die nächsten folgenden Blöcke stoppt, damit sie richtig positioniert werden, wie Sie wollen. So ist es notwendig ein Schwimmer-Stopp-Element zu definieren. Ihre Blöcke funktionieren mit float:left vielleicht float:right. Irgendwann wird Sie herausfinden, dass dieses Verhalten irgendwo am besten mit CSS

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

und Html

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

aller Blöcke Hergestellt getan zu stoppen hat die Grenze zum nächsten Block auf der linken Seite müssen (vielleicht auch rechte Seite) müssen Sie ein Basislayout definieren, das Platz für den ganz rechts platzierten Block auch mit dem Randbereich dafür bietet, sonst würde es vorher unter dem Block herunterschweben.

Aber es gibt einen moderneren Weg! Sie können CSS3-Codes verwenden, um Ihr Layout zu definieren.

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

Es andere Dinge hier zu erwähnen, aber Sie können über http://www.w3schools.com/css3/css3_multiple_columns.asp