Drag & drop может понадобиться в разных ситуациях — например, в таких:
1. Простое визуальное изменение положения элемента.
2. Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
3. Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
4. Перемещение локальных файлов в окно браузера.
HTML Drag and Drop API
В стандарте HTML5 есть API, который позволяет реализовать эффект drag & drop. Он даёт возможность с помощью специальных событий контролировать захват элемента на странице мышью и его перемещение в новое положение.
По умолчанию перемещаться могут только ссылки, изображения и выделенные фрагменты. Если начать перетаскивать их, появится фантомная копия, которая будет следовать за курсором. Чтобы добавить возможность перетаскивания другим элементам, нужно задать атрибуту draggable значение true.<div draggable="true">Draggable element</div> Для реализации перемещения используется ряд событий, которые срабатывают на разных этапах. Основные из них:
drag — срабатывает каждые несколько сотен миллисекунд, пока элемент перетаскивается.
dragstart — срабатывает в момент начала перетаскивания элемента.
dragend — срабатывает в момент, когда перетаскивание элемента завершено.
dragover — срабатывает каждые несколько сотен миллисекунд, пока перетаскиваемый элемент находится над зоной, в которую может быть сброшен.
drop — срабатывает в тот момент, когда элемент будет брошен, если он может быть перемещён в текущую зону.