Чтобы карточку можно было потащить, достаточно добавить draggable=“true”. Браузер даже покажет её полупрозрачную копию под курсором. А вот соседние карточки сами не разъедутся, и место для вставки не появится.

Например, мы хотим перенести карточку из «В работе» в «Готово». Когда пользователь начинает её тащить, срабатывает dragstart. В обработчике записываем ID задачи в event.dataTransfer:

event.dataTransfer.setData(‘text/plain’, taskId)

Это хранилище данных текущего перетаскивания. Принимающая сторона получит из него ID и сможет понять, какую задачу переносили. Если нужен целый объект, его придётся сериализовать: setData() принимает строки. Пока карточка движется над колонкой, та получает dragover. Чтобы разрешить перенос, в обработчике нужно вызвать preventDefault(). Без этого обычный div не принимает элементы и drop не сработает.

Когда пользователь отпускает карточку над колонкой, в drop читаем ID через getData(‘text/plain’) и обновляем задачу. Сам браузер ни статус, ни состояние React-приложения не поменяет. Для переноса между двумя колонками этого уже может хватить, но скорее всего вам выдвинут требование ещё менять порядок карточек внутри списка - и тогда нужно вычислять место вставки по положению курсора, сдвигать соседние элементы, показывать будущую позицию карточки и прокручивать контейнер у края. Нативный API не предоставляет готовую сортировку — всю эту механику пишем сами.

На сенсорном экране приходится ещё различать намерения пользователя. Он хочет потащить карточку или прокрутить доску? А долгое нажатие должно начать перенос, выделить текст или открыть меню? Поддержка нативного DnD на мобильных есть, но одного атрибута для удобного управления пальцем недостаточно.

Поэтому библиотеки для сортировки часто строят на Pointer Events: так можно обрабатывать мышь, палец и стилус и управлять перемещением элемента. Порог начала перетаскивания, прокрутка и управление с клавиатуры тоже требуют реализации.

У нативного Drag and Drop при этом есть полезная возможность: принимать данные извне страницы. Например, файл с рабочего стола можно бросить в область загрузки и получить его через DataTransfer.files. Здесь связь с операционной системой уже обеспечивает браузер.

#ks_фронтенд #ks_фича #фронтенд