Перемещение элементов

Umbrella JS — это лёгкая библиотека для работы с DOM, ориентированная на упрощение манипуляций с элементами, обработку событий и AJAX-запросы. Основной принцип работы заключается в использовании обёртки u() вокруг селектора, возвращающей объект с множеством удобных методов для работы с выбранными элементами.

Для перемещения элементов ключевое значение имеют методы управления структурой DOM: вставка, удаление и перенос элементов между родителями.

Выбор элементов для перемещения

Выбор элементов производится с помощью CSS-селекторов:

let элементы = u('.box');

u('.box') возвращает объект Umbrella JS, содержащий все элементы с классом box. Эти элементы можно передавать в методы перемещения.

Вставка элементов

Umbrella JS предоставляет методы для вставки элементов относительно других:

append

Добавляет выбранные элементы в конец контейнера:

u('#container').append(u('.item'));
  • #container — родительский элемент, куда добавляются .item.
  • .item удаляется из текущего места и добавляется в конец контейнера.

prepend

Вставляет элементы в начало контейнера:

u('#container').prepend(u('.item'));

Отличие от append — новые элементы становятся первыми дочерними элементами родителя.

before и after

Позволяют вставлять элементы до или после указанного элемента:

u('.reference').before(u('.item'));
u('.reference').after(u('.item'));
  • before — перед .reference.
  • after — после .reference.

Эти методы автоматически перемещают элемент из текущего родителя в новое место.

Перемещение элементов между контейнерами

Чтобы перенести элемент, достаточно использовать один из методов вставки. Например:

u('#target').append(u('#source .move'));

Здесь элемент с классом move из контейнера #source перемещается в конец #target. Umbrella JS автоматически удаляет его из старого родителя.

Клонирование элементов перед вставкой

Иногда требуется сохранить исходный элемент в старом месте. Для этого используется метод clone():

u('#source .item').clone().appendTo('#target');
  • clone() создаёт точную копию выбранного элемента.
  • appendTo добавляет к указанному контейнеру. Это позволяет одновременно оставить оригинал и создать копию в новом месте.

Методы удаления перед перемещением

Для сложных сценариев можно явно удалить элемент перед вставкой:

u('.item').remove();
u('#target').append(u('.item'));

Однако использование append, prepend, before и after делает remove() необязательным, так как эти методы автоматически перемещают элемент.

Перемещение с сохранением событий и данных

Umbrella JS сохраняет события и данные при перемещении элементов через методы вставки. Пример:

u('.item').on('click', () => console.log('clicked'));
u('#new-container').append(u('.item'));

Элемент после перемещения сохраняет привязанный обработчик click.

Для клонирования с сохранением событий используется:

u('.item').clone(true).appendTo('#new-container');
  • Аргумент true в clone() указывает на сохранение всех событий и данных.

Работа с группами элементов

Umbrella JS позволяет одновременно перемещать несколько элементов:

u('.items').appendTo('#container');

Все элементы с классом .items будут перенесены в указанный контейнер. При этом порядок элементов сохраняется.

Практические советы

  • Методы append, prepend, before, after работают только с DOM-элементами, переданными через u() или обычные HTML-элементы.
  • Клонирование рекомендуется использовать, если требуется сохранить исходные элементы или их обработчики событий.
  • Перемещение больших наборов элементов эффективно, так как Umbrella JS минимизирует количество операций в DOM.

Пример комплексного перемещения

// Переместить все карточки из одной секции в другую
u('.card').each((el) => {
    u('#new-section').append(el);
});
  • each позволяет итерировать элементы и выполнять сложные действия при перемещении.
  • append автоматически удаляет элемент из старого родителя, экономя лишние шаги.

Umbrella JS сочетает простоту и гибкость при управлении DOM. Перемещение элементов становится безопасным, лаконичным и удобным благодаря единым методам вставки и клонирования, с сохранением событий и данных.

Оглавление