Грейс Но написала о перетаскивании (drag and drop) на примере интерфейсов VMware.

Где используется:
— Изменение порядка и уровня вложенности элементов дерева;
— Изменение порядка колонок в таблице данных;
— Изменение порядка рядов в таблице данных;
— Перемещение элементов между древовидным меню и таблицей данных;
— Упорядочивание и объединение карточек.

Если элемент можно перетаскивать, надо проработать:
1. Состояние покоя;
2. Состояние перетаскивания;
3. Обозначение исходного местоположения элемента — где он был до начала перетаскивания и куда вернётся, если пользователь не найдёт для него подходящее место приземления;
4. Обозначение места приземления — новое место, в котором элемент окажется после завершения перетаскивания.

В состоянии покоя:
— Специальным маркером обозначить возможность перетаскивания. Особенно важно так делать, если не все элементы можно перетащить;
— При наведении на элемент менять курсор, например, на руку.

В состоянии перетаскивания:
— Стилистически выделять элемент. Например, с помощью тени приподнимать его над соседними. В Трелло перетаскиваемые карточки слегка наклоняются;
— Менять курсор, например, на сжатую руку.

Исходное местоположение можно показывать полупрозрачным экземпляром перетаскиваемого элемента. Его может не быть, если создаётся эффект естественного движения, когда все элементы вокруг сдвигаются и уступают место перетаскиваемому (пример — упорядочивание вкладок в Хроме или Сафари).

Место приземления можно показывать жирной линией с кружком. Если место приземления недоступно, можно менять курсор, например, на запрещающий знак.

Важно придерживаться одних паттернов перетаскивания в рамках единого интерфейса. Антипример: Salesforce использует 3 разных маркера для обозначения возможности перетаскивания.

#drag_and_drop

Сеара Кроушоу написала о перетаскивании: первая, вторая часть перевода.

— Источник — контейнер с перетаскиваемыми объектами. Цель — статичная или динамичная область, куда эти объекты можно переместить, которая в режиме реального времени даёт обратную связь о процессе;
— Основные сценарии: перемещение объектов (например, файлов на страницу браузера для загрузки), изменение порядка элементов списка, изменение размера, сложные взаимодействия (перемещение якорных точек прямоугольника в Фигме);
— У объектов может быть область захвата, за которую их можно схватить для перетаскивания, выделенная графически или иконкой. При наведении на неё показывайте обратную связь, в том числе меняя курсор (например, на стрелку вверх и вниз, если доступно перетаскивание по вертикали);
— Состояние цели может меняться: по умолчанию в ней может быть текст о возможности перетащить файлы (например, для загрузки) и допустимых форматах, в процессе — количество выбранных файлов и текст, что их надо отпустить над выделенной областью, в конце — сообщение об ошибке (слишком много файлов) или успехе;
— Положение цели тоже может меняться. Например, если перетаскиванием пользователь перемещает элемент в древовидной иерархии;
— Базовое решение при изменении порядка элементов: полупрозрачную копию перетаскиваемого элемента отображать в исходном месте, место, куда он переместится, отмечать лаконичным маркером. Так будет меньше мельтешения, понятен порядок до начала перемещения, но само перемещение происходит в конце, когда пользователь отпускает элемент;
— Продвинутое решение: перетаскиваемый элемент покидает исходное место и сразу отображается в новом месте;
— Перетаскивание — пример непосредственного манипулирования объектами, которое интуитивно понятно пользователям;
— Для повышения доступности полезно начать с реализации альтернативного решения;
— Перетаскивание может быть плохой идеей (или требовать поиска дополнительных решений), если одновременно с ним требуется прокрутка страницы.

In English. #drag_and_drop

Александр Григоренко написал о проектировании перетаскивания.

— Drag and Drop — взаимодействие с объектами, состоящее из трёх последовательных операций: захвата (Drag) объекта, перемещения и отпускания (Drop);
— Отлично подходит для: 1) перемещения элемента на новую позицию, 2) изменения размера или формы элемента;
— В отличие от реального мира, в цифровой среде непонятно, что и куда можно перемещать, как захватить (элемент доступен полностью или есть «ручка захвата») и что произойдёт после перемещения;
— Для ручек захвата в интерфейсе нет единой графической метафоры, но есть с годами сложившиеся варианты. Важно придерживаться выбранного варианта;
— Есть специальные курсоры: Grab и Grabbing (macOS) и Move (Windows) для перемещения, No-drop для пересечения с зонами, где элемент нельзя сбросить, с префиксом Rezise для изменения размера;
— Если на объект можно и просто нажать, подберите не слишком быструю или долгую длительность нажатия, которая приведёт к перетаскиванию (50–500 ms);
— Проблема лишних небольших движений курсора при нажатии (Sloppy Clicks) решается порогом дистанции, прохождение которой запускает перетаскивание (3–5 px);
— Объект при перетаскивании должен визуально отличаться от остальных;
— В списке или гриде важно определить, когда сдвигать элементы, чтобы перетаскиваемый мог занять их место. Лучше всего — в момент пересечения края перетаскиваемого объекта с центром статичного. Также потребуется ненавязчивая анимация перемещения элементов (100–500 ms);
— Проще в разработке — не двигать сразу элементы списка или грида, а показывать индикатор возможного положения перетаскиваемого объекта. И так легче не терять контекст старого положения элементов (полезно при работе с mindmap);
— Если зона сброса находится за пределами экрана, поможет автоскрол страницы вслед за перетаскиваемым объектом. На мобильных аккуратно подбирайте его скорость. Ещё можно показывать временное окно для сброса объекта в пределах текущего окна (Drag Lens);
— Предусмотрите отмену перетаскивания клавишей Esc и сбросом элемента в нейтральную зону;
— В целях доступности добавьте альтернативные способы выполнить то, что даёт перетаскивание.

#drag_and_drop