Перетаскивания элементов курсором мыши (Drag and drop)

Перетаскивания элементов курсором мыши (Drag and drop) — механизм перемещения элементов интерфейса, который позволяет пользователю перетаскивать нужный элемент, удерживая его кнопкой мыши, из одной области окна браузера в другую. Механизм используется, например, для перемещения записей в списке или между списками или для перемещения заметки/иконки/панели по экрану.

Пример
Исходный код

Документация API Спецификация Axure

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

В реализации механизма перемещения задействованы контролы:

Контроллер перемещения

Перемещение сущностей работает только внутри контроллера Controls/dragnDrop:Controller. Этот контроллер обеспечивает взаимосвязь между контейнерами перемещения.
Он отслеживает события контейнеров и оповещает о них другие контейнеры. В зависимости от события изменяет отображение миниатюры перемещаемой сущности.

Контроллер Controls/dragnDrop:Controller по умолчанию встроен в SbisEnvUI/Bootstrap.

Контейнер перемещения

Контейнер перемещения Controls/dragnDrop:Container отслеживает события мыши и генерирует события перемещения.

События перемещения

Список событий контейнера приведен в таблице:

НазваниеОписание
dragStartначало перемещения — у контейнера, в котором началось перемещение
documentDragStartначало перемещения — у всех контейнеров*
dragEndзавершение перемещения — у контейнера, в котором завершилось перемещение
documentDragEndзавершение перемещения — у всех контейнеров*
dragMoveпроцесс перемещения — у контейнера, в котором началось перемещение
dragEnterперемещение элемента в контейнер
dragLeaveперемещение элемента из контейнера

*На странице приложения может быть использовано несколько контейнеров.
Когда одному контейнеру отдаётся команда на перемещение сущности, происходят события начала/конца перемещения у всех контейнеров страницы.

Рисунок ниже иллюстрирует работу событий:

Элементы списка draggable item 6 — draggable item 9 расположены в контейнере 1 Controls/dragnDrop:Container. Перемещаем элемент draggable item 9 из списка в корзину (контейнер 2 Controls/dragnDrop:Container).

  • Начало перемещения. Событие dragStart инициируется контейнером 1, т.к. перемещение началось в нем. Событие documentDragStart инициируется всеми контейнерами.

  • Элемент перемещается в Корзину. Событие dragEnter инициируется контейнером 2, событие dragLeave — контейнером 1.

  • Завершение перемещения. Событие dragEnd инициируется контейнером 2, т.к. перемещение завершилось в нем. Событие documentDragEnd инициируется всеми контейнерами.

Методы

Перемещение не заработает автоматически. Для его запуска необходимо обработать соответствующее событие: mouseDown или touchStart. В обработчике события необходимо позвать метод startDragNDrop(), в который передаются:

  • entity — сущность перемещения;
  • mouseDownEvent — событие, которое пришло в обработчик события mouseDown (touchStart).

Сущность entity должна наследоваться от класса Controls/dragnDrop:Entity. Сущность можно любым образом кастомизировать, записав туда любые необходимые данные.

Запрет на перемещение

Для поддержки возможности просто выделить текст, без начала перемещения, можно использовать класс controls-DragNDrop__notDraggable.

В пределах блока, на котором установлен класс, перемещение работать не будет.

Как расположить контроллер и контейнеры перемещения внутри контрола

На следующей схеме показан пример вложенности контроллера и контейнеров перемещения внутри прикладного контрола.