Управление через JavaScript

Библиотека Shopify Draggable предоставляет мощный API для организации интерактивного перетаскивания элементов на веб-странице. Управление через JavaScript позволяет реализовать тонкий контроль над поведением элементов, событиями и взаимодействиями с другими компонентами интерфейса.

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

Для начала работы создаётся объект Draggable, которому передаётся контейнер с элементами и настройки поведения:

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

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

const draggable = new Draggable(container, {
  draggable: '.draggable-item',
  delay: 100,           // Задержка начала перетаскивания (мс)
  mirror: {
    constrainDimensions: true
  }
});

Ключевые моменты:

  • draggable — селектор элементов, которые можно перетаскивать.
  • delay — полезно для предотвращения случайных перетаскиваний при кликах.
  • mirror — создание копии перетаскиваемого элемента, которая визуально следует за курсором.

Основные события

Draggable предоставляет широкий спектр событий, позволяющих отслеживать каждое действие пользователя:

  • drag:start — инициируется при начале перетаскивания.
  • drag:move — вызывается при перемещении элемента.
  • drag:stop — завершается после отпускания элемента.
  • mirror:created и mirror:destroy — управление копией перетаскиваемого элемента.
  • sortable:sorted — фиксирует изменения порядка в контейнере.

Пример подписки на события:

draggable.on('drag:start', (event) => {
  event.source.style.opacity = '0.5';
});

draggable.on('drag:stop', (event) => {
  event.source.style.opacity = '1';
});

Динамическое управление элементами

Draggable позволяет добавлять и удалять элементы без повторной инициализации:

const newItem = document.createElement('div');
newItem.classList.add('draggable-item');
container.appendChild(newItem);

draggable.addContainer(container); // Обновление контейнера

Удаление элементов также легко интегрируется через API:

draggable.removeContainer(container);

Настройка сортировки

Если необходимо реализовать drag-and-drop сортировку, подключается модуль Sortable:

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

const sortable = new Sortable(container, {
  draggable: '.draggable-item',
  handle: '.handle',        // Перетаскивание только за определённый элемент
  swapAnimation: {
    duration: 200,
    easingFunction: 'ease-in-out'
  }
});

Особенности Sortable:

  • handle ограничивает область перетаскивания, предотвращая случайные движения.
  • swapAnimation создаёт плавное перемещение элементов при изменении порядка.

Программное управление перетаскиванием

Можно инициировать или останавливать перетаскивание через методы Draggable:

draggable.enable();   // Активировать перетаскивание
draggable.disable();  // Отключить перетаскивание

Также возможно программно перемещать элементы с помощью событий и DOM-операций:

const item = container.querySelector('.draggable-item');
container.insertBefore(item, container.firstChild);

Кастомизация визуальной части

Mirror-элемент можно стилизовать через событие mirror:created:

draggable.on('mirror:created', ({ mirror }) => {
  mirror.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
  mirror.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
});

Это позволяет сделать перетаскиваемый элемент более заметным и улучшить UX.

Взаимодействие с другими библиотеками

Draggable хорошо интегрируется с библиотеками анимации, такими как GSAP, и системами управления состоянием:

import { gsap } from 'gsap';

draggable.on('drag:move', ({ mirror }) => {
  gsap.to(mirror, { x: mirror.offsetLeft, y: mirror.offsetTop, duration: 0.1 });
});

Такое сочетание позволяет создавать сложные интерфейсы с плавными анимациями и динамическими перестановками элементов.

Производительность и оптимизация

Для больших списков элементов рекомендуется:

  • Использовать delay и handle для минимизации случайных срабатываний.
  • Ограничивать количество DOM-операций внутри событий drag:move.
  • Отключать Mirror-эффекты при низкой производительности на мобильных устройствах.

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

Примеры расширенного использования

Связывание нескольких контейнеров:

const containers = document.querySelectorAll('.draggable-container');
const sortableMulti = new Sortable(containers, {
  draggable: '.draggable-item',
  mirror: {
    constrainDimensions: true
  }
});

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

Комбинированное использование с фильтрацией:

draggable.on('drag:start', ({ source }) => {
  if (source.classList.contains('locked')) {
    source.classList.add('no-drag');
    return;
  }
});

Таким образом, можно динамически запрещать перетаскивание определённых элементов.

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

Оглавление