Я ищу некоторые советы по проекту, над которым я работаю, и буду благодарен за любую помощь.
Цель:
Чтобы сделать CMS перетаскивания, который позволяет пользователю рисовать элементы на сетке и перемещать их в нужную позицию. Изменения записываются в формате JSON и преобразуются в HTML/CSS, когда пользователь нажимает кнопку публикации. Итоговый HTML должен быть чистым и гибким (т.е. Обслуживать контент, который будет меняться по высоте и длине). Система должна иметь возможность обрабатывать создание сайтов электронной коммерции, а также простых информационных сайтов.
Проблема:
Логичным способом достижения системы перетаскивания в HTML является использование позиционирования absolute с помощью набора width и height s; этот метод не поддается готовому сайту, так как контент, вероятно, будет иметь переменную длину, и поскольку абсолютно позиционированные элементы вынимаются из потока документа, они не знают о них вокруг.
Решение:
Создайте систему, которая преобразует абсолютно позиционированные элементы в плавающие элементы.
Пример:
В системе CMS пользователь создает следующий макет путем рисования ячеек в сетке:
- Заголовок фиксированной высоты
- Навигация с переменной высотой
- Изображение фиксированной высоты
- Основное содержание страницы переменной высоты
- Список посещенных элементов переменной высоты
- Нижний колонтитул с фиксированной высотой
Абсолютная компоновка:
HTML/CSS будет примерно таким:
body {
background-color: #999999;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 70%;
margin: 15px 0;
padding: 0;
}
#mainContainer {
background-color: #FFFFFF;
height: 500px;
margin: 0 auto;
position: relative;
width: 916px;
}
.contentBlock {
border: 1px solid orange;
box-sizing: border-box;
color: orange;
font-size: 2em;
text-align: center;
}
.contentBlock:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
#contentBlock1 {
height: 120px;
left: 0;
position: absolute;
top: 0;
width: 916px;
}
#contentBlock2 {
height: 100px;
left: 0;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock3 {
height: 100px;
left: 0;
position: absolute;
top: 260px;
width: 136px;
}
#contentBlock4 {
height: 220px;
left: 156px;
position: absolute;
top: 140px;
width: 604px;
}
#contentBlock5 {
height: 220px;
left: 780px;
position: absolute;
top: 140px;
width: 136px;
}
#contentBlock6 {
height: 120px;
left: 0;
position: absolute;
top: 380px;
width: 916px;
}<div id="mainContainer">
<div class="contentBlock" id="contentBlock1">1</div>
<div class="contentBlock" id="contentBlock2">2</div>
<div class="contentBlock" id="contentBlock3">3</div>
<div class="contentBlock" id="contentBlock4">4</div>
<div class="contentBlock" id="contentBlock5">5</div>
<div class="contentBlock" id="contentBlock6">6</div>
</div>