Атрибут draggable и событие dragstart

Любой элемент становится источником перетаскивания, если задать ему draggable="true". Ссылки и изображения можно перетаскивать по умолчанию; для остальных элементов, например контейнеров, элементов списков и строчных элементов, требуется явно указать этот атрибут. Атрибут draggable="false" отключает встроенное перетаскивание элемента.

Когда пользователь начинает перетаскивание, исходный элемент инициирует событие dragstart. Здесь инициализируйте перетаскивание: запишите, какой элемент перемещается, при необходимости измените его оформление и запишите данные в объект dataTransfer, который прочитает цель сброса.

Если пометить элемент как доступный для перетаскивания, но не обрабатывать начало перетаскивания, браузер всё равно будет перемещать изображение ghost, однако данные не будут заданы, поэтому большинство целей сброса отклонит операцию. Всегда сочетайте атрибут перетаскивания с обработчиком начала перетаскивания, который сохраняет хотя бы идентификатор.

e.dataTransfer.effectAllowed = "move" в начале перетаскивания ограничивает операцию: «копирование», «перемещение», «ссылка», «copyMove», «все операции» или «ничего». Это определяет вид курсора, который показывает браузер, и значение dropEffect, которое цель может установить позднее.

Добавьте класс CSS к исходному элементу, чтобы во время перетаскивания он выглядел приглушённым: card.classList.add("dragging"). Удалите класс в событии dragend, чтобы оформление сбрасывалось независимо от того, завершился ли сброс успешно или был отменён клавишей выхода.

По умолчанию браузер перетаскивает полупрозрачный снимок исходного элемента. Переопределите его с помощью e.dataTransfer.setDragImage(node, offsetX, offsetY) — передайте скрытый элемент DOM или изображение, чтобы показывать пользовательский предпросмотр у курсора.

dragend возникает у исходного элемента после завершения перетаскивания независимо от того, был ли сброс выполнен успешно, произошёл на недопустимой цели или был отменён. Используйте его для очистки: удаляйте класс перетаскивания, скрывайте ghost-предпросмотры и восстанавливайте непрозрачность.

Внутри события завершения перетаскивания проверьте e.dataTransfer.dropEffect. Если значение — «ничего», сброс не произошёл: цель его отклонила, пользователь нажал клавишу выхода или сбросил объект за пределами страницы. В противном случае значение соответствует операции, выбранной целью сброса: «перемещение», «копирование» или «ссылка».

Встроенное перетаскивание в первую очередь рассчитано на настольные устройства. На сенсорных устройствах этот API почти не работает без полифилла или замены на основе событий указателя. Для удобных на мобильных устройствах интерфейсов изменения порядка используйте библиотеки вроде SortableJS или dnd-kit, которые скрывают различия между двумя моделями событий.

Встроенное перетаскивание не поддерживает управление с клавиатуры — пользователи, работающие только с клавиатурой, не могут менять порядок элементов. Всегда предоставляйте альтернативу: обработчики клавиш со стрелками, кнопки перемещения вверх и вниз или диалог изменения порядка, управляемый атрибутом aria. Перетаскивание должно дополнять другие способы, а не заменять их.

Выделение текста внутри перетаскиваемых элементов может мешать перетаскиванию. Примените CSS user-select: none и -webkit-user-drag: element к исходному элементу, чтобы браузер перетаскивал сам элемент, а не выделял текст внутри него.

Почему обычно необходимо добавлять обработчик начала перетаскивания, если одного атрибута draggable="true" уже достаточно, чтобы сделать элемент перетаскиваемым?

Помечайте источники как доступные для перетаскивания и используйте начало перетаскивания, чтобы заполнить dataTransfer, установить effectAllowed и при необходимости задать пользовательское изображение перетаскивания. Сочетайте это с завершением перетаскивания для очистки оформления. Предоставляйте альтернативы с клавиатуры для доступности и учитывайте полифиллы для сенсорных устройств.