Как создать настраиваемый динамический сетка с использованием CSS и JavaScript?

Question

Я работаю над проектом, который включает в себя много CSS. Клиент хочет иметь макет сетки на домашней странице, где он хочет иметь возможность переупорядочивать компоненты пользовательского интерфейса с перетаскиванием. Эти компоненты пользовательского интерфейса могут быть разных размеров: 1x1, 2x2 и 3x3. Когда я бросаю элемент пользовательского интерфейса в нужное новое место, он должен оттолкнуть другие компоненты. Любые возможные отверстия должны быть заполнены компонентами 1x1.

How it should work

1. До того как я потащил компонент
2. Draging компонента 2х2
3. Отбрасывания компонент в середине, два компонента 1x1 потесниться и адаптировать вокруг 2х2

Обратите внимание, что размер сетки не ограничен 8 1x1, но высота, а также ее ширина должны быть доступны для расширения и уменьшения.

Я предпочитаю не использовать таблицы, но кроме этого я открыт для предложений. Прямо сейчас я только что использовал встроенные блоки div, которые я могу перетащить, чтобы переключить объекты DOM jQuery. Эффект не совсем то, что хочет клиент: How it is now

Answer 1

Я сделал много динамических макетов с той же идеей. Вам нужно больше подумать о том, как ваше поведение с плавающей точкой от блока к блоку останавливается для следующих следующих блоков, поэтому они становятся правильно перегруппированными, как вы хотите. Поэтому для определения элемента float-stop необходим. Ваши блоки будут работать с float:left возможно float:right. В какой-то момент вы будете выяснить, что такое поведение должно остановиться где-то лучше всего сделать с CSS

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

и Html

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

Изготовлены из всех блоков, которые нуждаются границу следующего блока на левой стороне (возможно, правая сторона тоже), вы должны определить базовый макет, который имеет место для самого правильно размещенного блока с помощью borderpace для него, иначе он будет плавать под блоком раньше.

Но есть более современный способ! Вы можете использовать коды CSS3 для определения вашего макета.

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

Там другие вещи, чтобы упомянуть здесь, но вы можете прочитать о http://www.w3schools.com/css3/css3_multiple_columns.asp