Draggable и DragTarget

Пара виджетов Draggable и DragTarget позволяет пользователю перетаскивать элементы из одного места приложения в другое. Draggable — это то, что тащат, DragTarget — область, куда можно бросить. Так делают сортировку списков, перенос задач между колонками канбана, добавление товара в корзину.

Как это работает

У перетаскивания три части:

1. Пользователь начинает тащить дочерний виджет Draggable.
2. Draggable несёт с собой данные — заданное в его настройках значение Value.
3. DragTarget с таким же типом данных Type принимает значение и запускает настроенные действия.

Тип данных решает, совместимы ли виджеты. Значение говорит, что именно перетащили, — его можно проверить, прежде чем менять состояние приложения.

1. Добавьте Draggable

1. Добавьте виджет Draggable из палитры виджетов.
2. Вложите в него виджет, который пользователь будет тащить: Image, Container, Card — что угодно.

Данные Draggable

• Type — какого типа данные несёт виджет. Должен совпадать с Type у DragTarget, куда элемент планируют бросать.
• Value — сами данные, которые получит DragTarget. Значение задаётся вручную или берётся из переменной.

Для простых сценариев хватит строки или числа, по которым элемент опознаётся. Когда зоне приёма нужно сразу несколько связанных значений — идентификатор товара, название, цена, — заводите собственный тип данных.

2. Добавьте DragTarget

1. Поставьте DragTarget туда, куда пользователь будет бросать элементы.
2. Вложите в него виджет, который задаст видимое содержимое и область приёма. Например, Container — у него понятные границы.
3. В свойствах DragTarget задайте Type — тот же тип данных, что у соответствующих Draggable.

Размер DragTarget — это размер области, которая ловит перетаскиваемый элемент. Не делайте её тесной, особенно для сенсорных экранов.

3. Примите элемент

DragTarget принимает данные от Draggable, когда у обоих виджетов один и тот же Type. Если типы не совпадают, данные отклоняются, и действие On Drag Accept не запускается.

В этом примере DragTarget принимает строковые значения plant и spoon, а целое число 10 отклоняет.

Чтобы получить принятое значение и что-то с ним сделать:

1. Выделите DragTarget и откройте вкладку Actions.
2. Выберите On Drag Accept. В цепочке действий принятое значение лежит в Drag Target > Dragged Data — с ним и работайте.

События перетаскивания

Триггеры действий есть у обоих виджетов — через них перетаскивание доводят до ума.

События Draggable

Доступны на вкладке Actions виджета Draggable.

• On Drag Started — пользователь начал тащить виджет.
• On Drag Update — виджет движется; срабатывает по ходу перетаскивания.
• On Drag Completed — DragTarget принял брошенные данные.
• On Drag Cancelled — элемент отпущен, но никто его не принял.
• On Drag End — перетаскивание закончилось, неважно, успехом или отменой.

События DragTarget

Доступны на вкладке Actions виджета DragTarget.

• On Drag Enter — совместимый Draggable вошёл в область приёма. Подходит, чтобы подсветить зону.
• On Drag Exit — элемент покинул область. Подходит, чтобы снять временную подсветку.
• On Drag Accept — совместимые данные брошены и приняты. Здесь проверяют значение и меняют постоянное состояние.

Как сделать перетаскивание понятным

Сочетайте события с переменными состояния и условными стилями:

• По On Drag Enter ставьте временную переменную состояния — и подсвечивайте по ней активную зону приёма.
• По On Drag Exit сбрасывайте эту временную переменную, когда элемент ушёл из зоны.
• Постоянное состояние приложения или страницы меняйте только после On Drag Accept.
• По On Drag Started и On Drag End меняйте вид самого элемента или окружающего интерфейса на время перетаскивания.
• Если брошенное значение не подошло под условия зоны, покажите сообщение.

Состояние «над зоной» держите отдельно от состояния «принято». Если сбрасывать постоянное состояние по On Drag Exit, уход указателя из зоны отменит уже завершённое действие.

Рекомендации

• Берите самый простой тип данных, в который влезает всё, что нужно после броска. Собственный тип — когда вместе должны ехать несколько связанных значений.
• Не помечайте активную или подходящую зону приёма одним лишь цветом. Добавьте рамку, иконку, подпись — любой второй признак.
• Для важных задач дайте альтернативу перетаскиванию — нажатие или кнопку.