Учебник Shopify Draggable

Введение
- Что такое Shopify Draggable
- История создания библиотеки
- Архитектура и философия дизайна
- Сравнение с аналогами
- Требования к окружению
- Установка и подключение
Основы работы с библиотекой
- Базовая инициализация
- Структура DOM для draggable элементов
- Жизненный цикл перетаскивания
- Типы draggable объектов
- Containers и items
- Настройка через data-атрибуты
- Программная конфигурация
Draggable
- Создание экземпляра Draggable
- Параметры конструктора
- Методы экземпляра
- Определение draggable элементов
- Определение handle элементов
- Ограничение области перетаскивания
- Задержка активации
- Дистанция активации
- Отмена перетаскивания
Sortable
- Концепция сортируемых списков
- Инициализация Sortable
- Одноуровневая сортировка
- Вложенные списки
- Горизонтальная сортировка
- Сетки и таблицы
- Placeholder и mirror элементы
- Получение нового порядка элементов
Swappable
- Принцип работы Swappable
- Отличия от Sortable
- Настройка swap-зон
- Обработка обмена элементами
- Визуальная обратная связь
- Ограничения и валидация
Droppable
- Создание drop-зон
- Определение draggable источников
- Валидация совместимости
- Обработка успешного drop
- Обработка возврата элемента
- Множественные drop-зоны
- Вложенные droppable области
События
- Система событий библиотеки
- Фазы событий
- drag:start и его данные
- drag:move и отслеживание позиции
- drag:over и drag:out
- drag:stop и завершение
- sortable:start и sortable:sort
- sortable:sorted и sortable:stop
- swappable:start и swappable:swap
- swappable:swapped и swappable:stop
- droppable:start и droppable:over
- droppable:dropped и droppable:returned
- droppable:stop
- mirror:create и mirror:destroy
- Отмена действий через preventDefault
- Всплытие и перехват событий
Плагины
- Архитектура плагинов
- Подключение плагинов
- Collidable
- ResizeMirror
- Snappable
- SwapAnimation
- SortAnimation
- Announcement для accessibility
- Scrollable
- Создание собственных плагинов
Mirror элемент
- Назначение и поведение
- Настройка внешнего вида
- Позиционирование
- Кастомизация через CSS
- Управление через JavaScript
- Отключение mirror
- Асинхронная загрузка содержимого
Sensors
- Концепция сенсоров ввода
- MouseSensor
- TouchSensor
- DragSensor
- ForceTouchSensor
- Настройка чувствительности
- Комбинирование сенсоров
- Создание кастомных сенсоров
Стилизация и анимация
- CSS классы библиотеки
- Состояния элементов
- Transitions и animations
- Кастомные стили для placeholder
- Стилизация mirror элемента
- Визуальные эффекты при перетаскивании
- Адаптация под тему проекта
Производительность
- Оптимизация DOM операций
- Throttling и debouncing
- Работа с большими списками
- Виртуализация при необходимости
- Профилирование производительности
- Memory leaks и их предотвращение
- Лучшие практики
Доступность
- ARIA атрибуты
- Клавиатурная навигация
- Screen readers поддержка
- Фокус менеджмент
- Анонсы действий
- Семантическая разметка
- Тестирование доступности
Мобильные устройства
- Touch events обработка
- Жесты и их распознавание
- Scroll при перетаскивании
- Адаптация под размеры экрана
- iOS специфика
- Android специфика
- Тестирование на устройствах
Интеграция с фреймворками
- Vanilla JavaScript
- React компоненты
- Vue директивы и компоненты
- Angular директивы
- Svelte интеграция
- Управление состоянием
- Lifecycle hooks
Продвинутые техники
- Динамическое добавление элементов
- Условное включение/выключение
- Программное перемещение
- Сложные валидации
- Группировка элементов
- Клонирование при перетаскивании
- Множественный выбор
Обработка данных
- Синхронизация DOM и данных
- Сериализация порядка
- Отправка на сервер
- Оптимистичные обновления
- Откат изменений
- Конфликты и их разрешение
Отладка
- Инструменты разработчика
- Логирование событий
- Визуализация состояний
- Частые ошибки
- Troubleshooting гайд
- Debugging в production
Тестирование
- Unit тесты
- Integration тесты
- E2E тестирование
- Моки и стабы
- Симуляция событий
- Автоматизация тестов
API Reference
- Классы и конструкторы
- Публичные методы
- Свойства экземпляров
- Статические методы
- Типы и интерфейсы
- Константы и enum
- Deprecated функциональность
Миграция и обновление
- Версионирование библиотеки
- Breaking changes между версиями
- Стратегии миграции
- Обратная совместимость
- Changelog важных релизов
Безопасность
- XSS уязвимости
- Санитизация пользовательского ввода
- CSP политики
- Безопасная работа с HTML
Расширение функциональности
- Создание wrapper классов
- Композиция возможностей
- Хуки и middleware
- Декораторы событий
- Proxy паттерны