Программное перемещение

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

Инициализация Draggable

Для работы с программным перемещением сначала создаётся объект Draggable:

import { Draggable } from '@shopify/draggable';

const container = document.querySelector('.draggable-container');

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  mirror: {
    constrainDimensions: true,
  },
});
  • container — элемент, содержащий перетаскиваемые объекты.
  • draggable — селектор элементов, которые можно перемещать.
  • mirror.constrainDimensions — позволяет зеркальному элементу сохранять размеры оригинала при перемещении.

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

В Draggable API существует метод move, позволяющий переместить элемент в новый индекс внутри контейнера:

draggable.move(item, newIndex);
  • item — DOM-элемент, который нужно переместить.
  • newIndex — индекс, куда должен быть вставлен элемент после перемещения.

Пример:

const item = document.querySelector('.draggable-item:nth-child(2)');
draggable.move(item, 0);

В этом примере второй элемент перемещается на первую позицию.

Работа с событиями при программном перемещении

Draggable генерирует стандартные события drag:start, drag:move и drag:stop. При программном перемещении важно корректно отслеживать изменения:

draggable.on('drag:stop', (event) => {
  console.log(`Элемент ${event.source.textContent} перемещён на позицию ${Array.from(container.children).indexOf(event.source)}`);
});

При вызове move событие drag:stop автоматически срабатывает, что позволяет синхронизировать интерфейс и данные.

Удаление и вставка элементов

Иногда требуется не просто менять позиции, а полностью перемещать элемент между контейнерами. Для этого используется комбинация методов:

const targetContainer = document.querySelector('.another-container');
const item = document.querySelector('.draggable-item');

targetContainer.appendChild(item);
draggable.destroy(); // пересоздание Draggable для нового контейнера
const newDraggable = new Draggable(targetContainer, {
  draggable: '.draggable-item',
});

При этом важно помнить, что Draggable не отслеживает DOM-изменения автоматически, поэтому после перемещения между контейнерами нужно инициализировать новый экземпляр.

Плавное программное перемещение с анимацией

Для создания плавного визуального эффекта перемещения можно использовать CSS-переходы вместе с программным move:

.draggable-item {
  transition: transform 0.3s ease;
}
draggable.move(item, 3); // CSS обеспечит плавное смещение элемента

transition на свойстве transform автоматически применяет анимацию при изменении позиции, сохраняя визуальную целостность интерфейса.

Ограничение перемещений

Для более сложных интерфейсов можно ограничить программное перемещение по условиям:

function moveItemConditionally(item, newIndex) {
  if (newIndex < 0 || newIndex >= container.children.length) return;
  draggable.move(item, newIndex);
}

Эта проверка предотвращает ошибки при некорректных индексах и защищает DOM от неожиданного поведения.

Интеграция с динамическими данными

В связке с динамическими списками (например, при подгрузке товаров или карточек):

function reorderItems(items) {
  items.forEach((item, index) => {
    draggable.move(item, index);
  });
}

Эта стратегия позволяет синхронизировать порядок элементов с внутренним состоянием приложения, например с массивом объектов на фронтенде.

Практические рекомендации

  • Использовать move только для элементов, уже подключенных к Draggable.
  • После перемещения между контейнерами пересоздавать экземпляр Draggable.
  • Для больших списков применять requestAnimationFrame при массовых перемещениях, чтобы избежать просадок производительности.
  • События Draggable всегда срабатывают при программном перемещении, что позволяет обновлять данные и интерфейс в реальном времени.

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

Оглавление