Перетаскивание элементов в Zero Block: стикеры и фотографии на Tilda

Стикер можно оттащить в сторону, фотографии — разложить по-своему, декоративные фигуры — поменять местами. Такой небольшой интерактив хорошо подходит для творческой страницы или портфолио.

Мод добавляет свободное перетаскивание выбранным элементам Zero Block. Он не превращает страницу в редактор с сохранением: после обновления объекты возвращаются на исходные места. Это полезно учитывать ещё до вёрстки.

Для начала возьмите несколько декоративных стикеров, фотографий или фигур. Содержание страницы должно оставаться понятным, даже если посетитель сдвинет их в разные стороны. Кнопку покупки или единственный важный заголовок лучше не делать частью такой свободной композиции.

Задайте начальные позиции в Zero Block для всех нужных экранов. Именно к этой вёрстке страница вернётся после перезагрузки. Подумайте и о первом впечатлении: посетитель ещё ничего не двигал, поэтому исходная композиция уже должна быть аккуратной, а возможность перетащить предмет — достаточно понятной.

Выделите каждый перемещаемый элемент и задайте CSS Class Name drag без точки. Можно использовать другое короткое имя, но оно должно точно совпадать с настройкой конструктора. Один класс разрешено назначить нескольким объектам.

Не добавляйте этот класс случайно всему блоку вместо отдельных предметов. После подключения попробуйте схватить каждый из них по центру и у края. Если перенос не начинается, проверьте, нет ли сверху прозрачного шейпа или другого элемента. Визуально невидимый объект всё равно может перехватывать нажатия.

В конструкторе укажите класс и выберите вид курсора во время переноса. Затем настройте масштаб захваченного объекта: 1 сохраняет размер, меньше 1 уменьшает, больше 1 увеличивает. Небольшое изменение помогает почувствовать, что предмет уже взят.

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

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

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

Добавьте код в T123 после Zero Block и опубликуйте страницу. На компьютере перенесите несколько объектов, затем попробуйте то же самое на телефоне. Между предметами должна оставаться свободная область, в которой посетитель может спокойно прокрутить страницу.

Не назначайте этим же элементам другую анимацию переноса или масштаба без отдельной проверки. Эффекты могут менять одни и те же свойства и возвращать предмет на неожиданное место. Если движение дёргается, сначала оставьте один код перетаскивания и проверьте доступность подключаемых библиотек, а не усложняйте анимацию ещё сильнее.

Сдвиньте предметы так, как вы сами не стали бы их располагать: к краю, на другой стикер, рядом с кнопкой. Это помогает увидеть проблемы раньше посетителей. Затем обновите страницу и убедитесь, что исходная вёрстка восстановилась.

• Перемещаются только отмеченные декоративные объекты.
• Главные ссылки, текст и прокрутка остаются доступны.
• На телефоне предмет удобно схватить пальцем.
• После обновления возвращаются заданные в Zero позиции.

Если интерактив мешает основной задаче страницы, уменьшите число предметов или отведите ему отдельную секцию.

Читайте также: Кастомный курсор в Tilda: эффект и подсказки над ссылками · 3D-карточки в Tilda: наклон за курсором и переворот.