Учебник Dragula

Введение
- Что такое Dragula
- История создания и развития библиотеки
- Преимущества перед нативными решениями
- Сравнение с другими библиотеками drag-and-drop
- Требования и зависимости
- Установка и подключение
Основы работы с Dragula
- Инициализация библиотеки
- Создание первого контейнера
- Базовая конфигурация
- Автоматическое определение контейнеров
- Работа с несколькими контейнерами одновременно
- Уничтожение экземпляра dragula
Контейнеры и элементы
- Определение допустимых контейнеров
- Добавление и удаление контейнеров
- Ограничения на перетаскиваемые элементы
- Работа с вложенными структурами
- Клонирование элементов при перетаскивании
- Блокировка определенных элементов
События Dragula
- Обзор системы событий
- drag - начало перетаскивания
- dragend - завершение перетаскивания
- drop - размещение элемента
- cancel - отмена операции
- remove - удаление элемента
- shadow - создание теневого элемента
- over - наведение на контейнер
- out - выход из контейнера
- cloned - клонирование элемента
- Порядок срабатывания событий
- Обработчики событий и их параметры
Опции конфигурации
- moves - контроль возможности перетаскивания
- accepts - определение допустимости размещения
- invalid - блокировка захвата элементов
- containers - массив контейнеров
- isContainer - функция определения контейнеров
- copy - режим копирования
- copySortSource - сортировка в исходном контейнере
- revertOnSpill - возврат при отмене
- removeOnSpill - удаление при отмене
- direction - направление перетаскивания
- ignoreInputTextSelection - игнорирование текста
- mirrorContainer - контейнер для зеркала
Методы экземпляра Drake
- drake.destroy() - уничтожение
- drake.dragging - проверка активности
- drake.start() - программный запуск
- drake.end() - программная остановка
- drake.cancel() - отмена операции
- drake.remove() - удаление элемента
- drake.on() - подписка на события
- drake.off() - отписка от событий
- Цепочки вызовов методов
Стилизация и CSS
- Стандартные классы Dragula
- gu-mirror - зеркальный элемент
- gu-hide - скрытие оригинала
- gu-unselectable - блокировка выделения
- gu-transit - элемент в процессе перетаскивания
- Кастомизация визуального отображения
- Анимации и переходы
- Работа с тенями и указателями
- Адаптивная стилизация
Продвинутые техники
- Динамическое изменение конфигурации
- Программное перемещение элементов
- Условная логика перетаскивания
- Работа с data-атрибутами
- Интеграция с состоянием приложения
- Оптимизация производительности
- Отладка и диагностика проблем
Dragula и фреймворки
- Интеграция с ванильным JavaScript
- Работа с React
- Использование в Vue.js
- Применение в Angular
- Адаптеры и обертки
- Управление жизненным циклом
Сложные сценарии использования
- Множественный выбор элементов
- Перетаскивание между фреймами
- Работа с таблицами
- Древовидные структуры
- Канбан-доски
- Сортируемые списки с группировкой
- Drag-and-drop для мобильных устройств
Доступность и UX
- Клавиатурная навигация
- ARIA-атрибуты
- Визуальная обратная связь
- Обработка ошибок пользователя
- Тактильный отклик
Работа с данными
- Синхронизация DOM и модели данных
- Сохранение порядка элементов
- Отправка изменений на сервер
- Откат изменений при ошибках
- Кэширование состояния
- Валидация перемещений
Производительность
- Оптимизация больших списков
- Виртуализация элементов
- Throttling и debouncing
- Минимизация reflow и repaint
- Memory leaks и их предотвращение
- Профилирование приложения
Тестирование
- Эмуляция событий перетаскивания
- Тестирование на мобильных устройствах
Миграция и совместимость
- Переход с других библиотек
- Обратная совместимость версий
- Полифиллы для старых браузеров
- Обработка различий в браузерах
Расширение функциональности
- Создание плагинов
- Хуки и middleware
- Кастомные обработчики
- Расширение прототипа Drake
- Композиция функциональности
Безопасность
- Валидация пользовательского ввода
- Санитизация данных
- Защита от злонамеренных действий
Отладка и troubleshooting
- Типичные ошибки и их решения
- Использование DevTools
- Логирование событий
- Анализ производительности
- Конфликты с другими библиотеками
- Проблемы с z-index и positioning
Альтернативы и экосистема
- React DnD
- Native HTML5 Drag and Drop API
Справочник API
- Полный список опций
- Полный список методов
- Полный список событий
- Типы данных и интерфейсы
- Константы и перечисления