Как работает сетка редактора? Как перетаскивать элементы?

Каждая секция состоит из 3 структурных единиц:

  1. Сама секция – большая синяя рамка
  2. Красные колонки – просто структурные единицы, расширяющие возможности дизайна
  3. Маленькие синие виджеты

Как перетаскивать виджеты?

 

 

Рассмотрим на примере перетаскивания виджета – кнопка.

Как только мы зажали кнопку мыши, в редакторе подсвечивается сетка для перетаскивания виджетов.

Если вы будете водить виджетом кнопка, то увидите, как подсвечиваются красные или синие полоски, которые показывают, куда вставится виджет. Лучше попробовать в редакторе и посмотреть, как это происходит.

Рассмотрим все 4 ситуации:

  1. Мы вставляем виджет кнопки внутри красной колонки под виджет текста. Цвет наведения места вставки – синий. Слева до вставки, справа после вставки.
  2. Мы вставляем виджет кнопки внутри красной колонки слева от виджета текста. Цвет наведения места вставки – синий. Слева до вставки, справа после вставки.
  3. Мы создаем новую красную колонку (столбец) – вставляем виджет кнопки между колонками. Цвет наведения места вставки – красный.  Слева до вставки, справа после вставки.
  4. Мы создаем новую красную колонку (строку) – вставляем виджет кнопки между колонками строками. Цвет наведения места вставки – красный.  Слева до вставки, справа после вставки.

Как видите ничего сложного нет. Необходимо запомнить три момента:

  • Зажимаем мышкой тот элемент, который хотим переместить и перемещаем
  • Красная подсветка при наведении – отпустите мышь и она создаст новую колонку (строку или столбец), внутри которой будет тот виджет, который вы перетаскиваете.
  • Синяя подсветка при наведении – отпустите мышь и она вставит перетаскиваемый виджет внутри красной колонки согласно положению.

Как сетка понимает куда должен вставится виджет?

Расскажем всю технологию, как редактор понимает, куда вы хотите вставить любой элемент.

Вставка виджетов внутри красных колонок

Смотрите, каждый виджет можно образно поделить 2 красными диагоналями на 4 части, получится "конвертик". Эти 4 синие области и будут активными при наведении и определят, куда вставится виджет.
Все зависит от наведения мыши. Куда вы наведете мышь и отпустите – туда и вставится виджет.

Точно также для любых других виджетов. Все работает по одной системе.

Создание новых красных колонок – столбцов и строк

Аналогично областей внутри для синих виджетов, есть области между колонками. При наведении мыши на них и отпускании ее и будут создаваться новые колонки.

На картинке ниже показаны активные области для вставки колонок – строк (зеленые) и столбцов (красные)

support@bloxy.ru

+7 (495) 003-3465

Служба поддержки по телефону
с 10:00 до 20:00 по МСК

ИП Бурханов С.С.
ОГРН 306732511400012
ИНН 732700488466
г. Ульяновск, ул. Красноармейская, д.4