Перетаскивания элементов курсором мыши (Drag and drop)
Перетаскивания элементов курсором мыши (Drag and drop) — механизм перемещения элементов интерфейса, который позволяет пользователю перетаскивать нужный элемент, удерживая его кнопкой мыши, из одной области окна браузера в другую. Механизм используется, например, для перемещения записей в списке или между списками или для перемещения заметки/иконки/панели по экрану.
Документация API Спецификация Axure
Как настроить перетаскивание элементов курсором мыши для прикладного решения
В реализации механизма перемещения задействованы контролы:
- Controls/dragnDrop:Controller — контроллер перемещения.
- Controls/dragnDrop:Container — контейнер перемещения.
Контроллер перемещения
Перемещение сущностей работает только внутри контроллера Controls/dragnDrop:Controller. Этот контроллер обеспечивает взаимосвязь между контейнерами перемещения.Он отслеживает события контейнеров и оповещает о них другие контейнеры. В зависимости от события изменяет отображение миниатюры перемещаемой сущности.
Контроллер Controls/dragnDrop:Controller по умолчанию встроен в SbisEnvUI/Bootstrap.
Контейнер перемещения
Контейнер перемещения Controls/dragnDrop:Container отслеживает события мыши и генерирует события перемещения.
События перемещения
Список событий контейнера приведен в таблице:
| Название | Описание |
|---|---|
| dragStart | начало перемещения — у контейнера, в котором началось перемещение |
| documentDragStart | начало перемещения — у всех контейнеров* |
| dragEnd | завершение перемещения — у контейнера, в котором завершилось перемещение |
| documentDragEnd | завершение перемещения — у всех контейнеров* |
| dragMove | процесс перемещения — у контейнера, в котором началось перемещение |
| dragEnter | перемещение элемента в контейнер |
| dragLeave | перемещение элемента из контейнера |
| changeDragTarget | изменение позиции, в которую будет перемещен элемент |
*На странице приложения может быть использовано несколько контейнеров.
Когда одному контейнеру отдаётся команда на перемещение сущности, происходят события начала/конца перемещения у всех контейнеров страницы.
Рисунок ниже иллюстрирует работу событий:
Элементы списка 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-List_DragNDrop__notDraggable.
В пределах блока, на котором установлен класс, перемещение работать не будет.
Как расположить контроллер и контейнеры перемещения внутри контрола
На следующей схеме показан пример вложенности контроллера и контейнеров перемещения внутри прикладного контрола.
