Jak stworzyć konfigurowalny, dynamiczny układ siatki za pomocą CSS i JavaScript?

Question

Pracuję nad projektem, który wymaga dużej ilości CSS. Klient chce mieć układ siatki na stronie głównej, gdzie chce zmienić układ komponentów interfejsu użytkownika metodą przeciągnij i upuść. Te komponenty interfejsu użytkownika mogą mieć różne rozmiary: 1x1, 2x2 i 3x3. Kiedy upuszczę element UI w pożądanym nowym miejscu, powinien on odłożyć pozostałe komponenty na bok. Wszelkie możliwe dziury powinny być wypełnione komponentami 1x1.

How it should work

1. Przed mam draged komponent
2. przeciągnięcie komponentu 2x2
3. upuszczenie komponentu w środku, dwa składniki 1x1 zrobić pokój i przystosować wokół 2x2

Należy pamiętać, że rozmiar siatki nie jest ograniczony do 8 1x1, ale wysokość i szerokość powinna być możliwa do rozszerzenia i zmniejszenia.

Wolę nie używać tabel, ale poza tym jestem otwarty na sugestie. W tej chwili właśnie użyłem bloków div typu inline, które można przeciągać i upuszczać, aby przełączać obiekty DOM jQuery. Efekt nie jest taki, jakiego chce klient: How it is now

Answer 1

Zrobiłem wiele dynamicznych układów z tym samym pomysłem. Musisz bardziej zastanowić się, jak zachowuje się zachowanie zmiennoprzecinkowe z bloku do bloku dla następnych kolejnych bloków, aby mogły zostać poprawnie ustawione na nowo, tak jak chcesz. Dlatego konieczne jest zdefiniowanie elementu typu "float-stop". Twoje klocki będą działać z float:left może float:right. W pewnym momencie można dowiedzieć się, że zachowanie to musi się zatrzymać gdzieś najlepiej zrobić z CSS

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

i HTML

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

Wykonane z wszystkich bloków, które potrzebują granicę do następnego bloku po lewej stronie (może również z prawej strony) musisz zdefiniować podstawowy układ, który ma miejsce dla bardzo dobrze umieszczonego bloku, z marginesem dla niego, w przeciwnym razie spuściłby się pod blokiem wcześniej.

Ale jest bardziej nowoczesny sposób! Możesz użyć kodów CSS3, aby zdefiniować swój układ.

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

istnieją inne rzeczy wspomnieć tutaj, ale można przeczytać o http://www.w3schools.com/css3/css3_multiple_columns.asp