DOM и React Senior События обновлено
Перестановка перетаскиванием
Условие
attachReorder(list, onReorder): элементы <li draggable> внутри list можно менять местами. При отпускании вызывается onReorder(from, to) с индексами. Верни функцию отписки.
Что проверяют тесты
сообщает индексы
dragover отменяется - иначе drop не сработает
бросок на самого себя игнорируется
отписка снимает всё
Как подойти
Главный подвох нативного drag and drop: по умолчанию элемент не является зоной сброса, и чтобы drop сработал, надо отменить поведение по умолчанию у dragover. Об этом забывают почти все. Остальное - делегирование и вычисление индексов. Настоящая перестановка делается в состоянии, а не в DOM: onReorder отдаёт индексы наружу.
Подсказки: 3
- Все три обработчика вешаются на контейнер - это делегирование.
- Без preventDefault на dragover событие drop вообще не наступит.
- Индекс элемента считается по его позиции среди детей контейнера.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.