Константы и enum

В библиотеке Shopify Draggable константы и перечисления (enum) играют ключевую роль в управлении поведением перетаскивания элементов, обработкой событий и настройкой взаимодействий. Они обеспечивают централизованный и предсказуемый способ использования фиксированных значений, уменьшая вероятность ошибок и повышая читаемость кода.

Типы констант

  1. Event constants Shopify Draggable использует набор констант для событий, возникающих в процессе перетаскивания. Это позволяет разработчику подписываться на события через единый интерфейс, вместо того чтобы полагаться на строки с названиями событий.

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

    • DRAG:start – инициирование перетаскивания.
    • DRAG:move – перемещение перетаскиваемого элемента.
    • DRAG:stop – завершение перетаскивания.
    • DRAG:over – когда элемент пересекает другой контейнер.
    • DRAG:out – когда элемент покидает контейнер.
    • DRAG:pressure – событие для устройств с поддержкой силы нажатия.

    Пример использования:

    const draggable = new Draggable(document.querySelectorAll('.list'), {
    draggable: '.item'
});

draggable.on(Draggable.Events.DRAG_START, (event) => {
    console.log('Начало перетаскивания:', event.data.source);
});

    Здесь Draggable.Events – это объект с ключами, представляющими все события библиотеки.

  1. Sensor constants Sensors определяют способ, которым библиотека отслеживает движение элементов. Для каждого сенсора существует набор констант, используемых при инициализации и конфигурации.

    Основные сенсоры:

    • MouseSensor – отслеживает движение мыши.
    • TouchSensor – предназначен для сенсорных экранов.
    • Sensor – базовый класс для создания пользовательских сенсоров.

    Константы позволяют проверять тип сенсора или применять специфические настройки. Например:

    import { MouseSensor, TouchSensor } from '@shopify/draggable';

const sensors = [
    {
        sensor: MouseSensor,
        options: { activationConstraint: { distance: 10 } }
    },
    {
        sensor: TouchSensor,
        options: { delay: 200 }
    }
];

const draggable = new Draggable(document.querySelectorAll('.list'), { sensors });

    Здесь константы MouseSensor и TouchSensor используются как ссылки на соответствующие классы сенсоров.

Enum для типов элементов и событий

Библиотека внедряет собственные перечисления (enum) для унификации значений, которые часто используются в настройках и обработчиках.

  1. Mirror class enum Класс Mirror отвечает за создание визуального клона перетаскиваемого элемента. Его enum содержит константы для управления стилями и состояниями:

    • Mirror.MIRROR_CLASS – CSS-класс для клона.
    • Mirror.MIRROR_VISIBLE – активное состояние отображения.

    Пример:

    const mirrorClass = Mirror.MIRROR_CLASS; // 'draggable-mirror'

  2. Sortable enum Для сортируемых списков используются константы, которые позволяют задать направление сортировки и ограничения:

    • Sortable.DIRECTION_VERTICAL – вертикальная сортировка.
    • Sortable.DIRECTION_HORIZONTAL – горизонтальная сортировка.
    • Sortable.DIRECTION_AUTO – автоматическое определение направления.

    Пример использования:

    const sortable = new Sortable(document.querySelector('.list'), {
    draggable: '.item',
    direction: Sortable.DIRECTION_VERTICAL
});

Константы для ограничения перетаскивания

Draggable позволяет задавать ограничения перемещения элементов через константы, чтобы ограничить поведение пользователя.

  1. Activation constraints Используются для определения минимального расстояния перемещения или задержки перед активацией перетаскивания:

    const draggable = new Draggable(document.querySelectorAll('.list'), {
    draggable: '.item',
    delay: 100, // задержка в миллисекундах
    distance: 5 // минимальное перемещение в пикселях
});

  2. Boundary constants Для ограничения перетаскиваемого элемента внутри контейнера или по оси применяются специальные значения:

    • 'x' – ограничение по горизонтали.
    • 'y' – ограничение по вертикали.
    • null – отсутствие ограничения.
    draggable.on('drag:move', (event) => {
    const axis = event.data.sensorEvent.axis;
    if (axis === 'x') {
        // Ограничение движения по оси X
    }
});

Стандартизация и читаемость

Использование констант и enum в Shopify Draggable позволяет:

  • Исключить магические строки и числа в коде.
  • Повысить читаемость и поддержку кода.
  • Обеспечить совместимость с будущими версиями библиотеки.
  • Сократить вероятность ошибок при обработке событий и настройках сенсоров.

Советы по организации кода с константами

  • Группировка по категориям: события, сенсоры, mirror, sortable.
  • Импорт из Draggable: использовать встроенные константы, чтобы избежать дублирования строк.
  • Типизация при TypeScript: enum и константы обеспечивают строгую типизацию и автодополнение.

Пример импорта всех констант:

import { Draggable, Sortable, Mirror } from '@shopify/draggable';

console.log(Draggable.Events.DRAG_START); // 'drag:start'
console.log(Sortable.DIRECTION_VERTICAL); // 'vertical'
console.log(Mirror.MIRROR_CLASS); // 'draggable-mirror'

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

Оглавление