Недавно у меня появилась идея заняться разработкойигры для андроид . Для начала я решил написать шахматы. Мне казалось технологияDrag and Drop отлично подойдет для реализации механизма перемещения фигур. Для непосвященных отмечу, чтометод drag and drop заключается в возможности перетаскивания одних графических объектов на другие и выполнения того или иного действия после отпускания. Простейший пример - удаление ярлыка с рабочего стола вашего ПК перетаскиванием его в корзину. "Кинув" ярлык в корзину, мы говорим системе, что хотим заставить взаимодействовать эти два объекта. Система получает наш сигнал и решает, какое действие ей стоит предпринять. Drag and drop получила широкое распространение благодаря своей интуитивной ясности. Этот подход подкреплен нашим опытом взаимодействия с объектами реального мира и прекрасно работает в виртуальной среде. Что же касается шахмат, с помощью drag and drop технологически проще определить клетку, куда пользователь перетащил фигуру, поскольку не нужно вычислять номер клетки по координатам точки отпускания. Эту работу возьмет на себя виртуальная машина.

Цели использования технологии Drag n Drop

Использование технологии drag and drop позволяет мне малой кровью решить три задачи:

Визуализация хода. Когда пользователь касается фигуры и начинает ее перемещение по экрану, фигура заменяется более мелким рисунком. Таким образом, пользователь понимает что фигура захвачена.

Я ограничил область перемещения фигуры размерами доски.

Если пользователь отпустил фигуру в неправильном месте, она должна вернуться в первоначальное положение.

Задачи обозначены, приступим к их реализации.

Подмена ImageView при касании

Все мои фигуры представляют собой объекты ImageView. К сожалению, оказалось что реализация Drag & Drop в Android не позволяет "прямо из коробки" осуществлять подмену изображения объекта при его касании. Тем не менее, эта задача вполне решаема средствами API. Нам понадобится выполнить ряд несложных действий:

Создать объект DragShadowBuilder.

Вызвать метод startDrag.

Спрятать наш ImageView, который отображает фигуру, вызвав метод setVisibility с параметром View.INVISIBLE. В результате на экране останется только объект DragShadowBuilder, что будет сигналом пользователю о захвате фигуры.

Эти действия необходимо реализовать в обработчике OnTouchListner объекта ImageView. Для этого переопределим метод onTouch:

@ Override public boolean onTouch(View view, MotionEvent motionEvent) { if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) { ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder(view) ; view. startDrag(clipData, dsb, view, 0 ) ; view. setVisibility(View. INVISIBLE) ; return true ; } else { return false ; } }

Все очень просто. Итак, с подменой изображения разобрались, перейдем к следующей задаче.

Ограничение области перетаскивания для функции drag drop

Ограничение области перетаскивания связано с одной проблемой. Дело в том, что если отпустить фигуру за пределами доски, события drop не случится, поскольку пользователь отпустил объект на пустом месте, и объекту не с чем взаимодействовать. В результате фигура не вернется в свое первоначальное состояние и так и останется навсегда спрятанной. Я убил уйму времени на чтение документации, но так и не нашел способа ограничить область перетаскивания объектов. Озарение пришло внезапно. Мне совсем не нужно ограничивать область, мне нужно узнать правильно ли пользователь отпустил фигуру или нет.

Определение правильности отпускания
Ответы на свои вопросы я нашел в разделе "handling drag end events" на сайте Android Developers. Вот несколько ключевых моментов:

Когда пользователь завершает перетаскивание в обработчике DragListeners генерируется событие ACTION_DRAG_ENDED.

В DragListener можно получить более подробную информацию об операции drag, вызвав метод DragEvent.getResult().

Если DragListener возвращает true в ответ на событие ACTION_DROP, вызов getResult также вернет true, в противном случае - false.

Таким образом, мне нужно перехватить событие ACTION_DRAG_ENDED и вызывать метод getResult. Если он вернет false, значит пользователь утащил фигуру за пределы доски, и мне нужно перевести ImageView в видимый режим.

@ Override public boolean onDrag(View view, DragEvent dragEvent) { int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) { containsDragable= false ; } else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) { containsDragable= true ; } else if (dragAction== DragEvent. ACTION_DRAG_ENDED) { if (dropEventNotHandled(dragEvent) ) { dragView. setVisibility(View. VISIBLE) ; } } else if (dragAction== DragEvent. ACTION_DROP& amp;& amp; containsDragable) { checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; } return true ; } private boolean dropEventNotHandled(DragEvent dragEvent) { return ! dragEvent. getResult() ; }

Теперь пользователь может где угодно отпускать фигуру, и ничего страшного не произойдет.

Определение допустимых ходов

Последняя часть статьи посвящена проверке допустимости хода, который пытается сделать пользователь. Прежде чем подробно приступить к обсуждению этой темы, сделаю небольшую ремарку, объясняющую структуру моего приложения. Шахматная доска представлена как TableLayout, а каждая клетка является потомком LinearLayout и имеет OnDragListener.

Кроме того, каждый OnDragListener ссылается на объект "посредника" (mediator), который заботится о взаимодействии игровых объектов и запоминает положение текущей клетки.

Когда пользователь тащит фигуру над клеткой, возможны следующие действия:

Использование события ACTION_DRAG_ENTERED для установки переменной ‘containsDraggable’ в true.

Использование события ACTION_DRAG_EXITED для установки переменной ‘containsDraggable’ в false.

Использование события ACTION_DROP для запроса посредника о допустимости установки фигуры в эту клетку.

Ниже приведен код, реализующий описанную логику

@ Override public boolean onDrag(View view, DragEvent dragEvent) { int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) { containsDragable= false ; } else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) { containsDragable= true ; } else if (dragAction== DragEvent. ACTION_DRAG_ENDED) { if (dropEventNotHandled(dragEvent) ) { dragView. setVisibility(View. VISIBLE) ; } } else if (dragAction== DragEvent. ACTION_DROP& amp;& amp; containsDragable) { checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; } return true ; }

Как видите, не зависимо от того допустим ли ход или нет, ImageView переводится в видимое состояние. Я хотел, чтобы пользователь видел, как перемещается фигура. Ранее я упоминал, что клетка является потомком LayoutView. Это сделано для того чтобы проще перемещать ImageView от клетки к клетке. Ниже приводится код метода checkForValidMove, который показывает, как происходит перемещение ImageView.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) { if (mediator. isValidMove(view) ) { ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity(Gravity. CENTER) ; view. showAsLanded() ; mediator. handleMove(view) ; } }

Надеюсь, эта статья поможет Вам при разработке собственных проектов.

Говоря о графическом интерфейсе пользователя нельзя не сказать о технологии Drag and Drop (буквально: Тяни и Бросай ).

Данная технология основана на перетаскивании элементов графического интерфейса из источника в приёмник. Интерфейс доступен только с помощью манипулятора мышь (тачпад, трекбол) или сенсорного экрана.

Элемент, доступный для перетаскивания, захватывают и удерживают мышкой, перетаскивая одновременно в другое место. Когда мышь установлена в правильную позицию, кнопку мыши отпускают, освобождая объект.

Следует однако отличать интерфейс Drag’n Drop от элементов управления интерфейсом, имеющими в своих методах методы, отвечающие за перемещение, реализуемые тем же способом. Например, окно (форма) имеет возможность перемещения по экрану (перетаскиванием за область заголовка). ScrollBox имеет ползунок прокрутки. Но в обоих примерах перетаскивание является внутренним (для компонента) действием (событием) и никаким образом не влияет на другие объекты системы.

Drag and Drop интерфейс применим только для перемещения объекта из контейнера в контейнер, даже в том случае, если контейнеры разнородные. Например, перетаскивание файла из папки в письмо .

Drag and Drop интерфейс в веб-технологиях

Использование интерфейсов Drag and Drop в веб-технологиях стало прорывом в . Существуют оффлайн Drag and Drop редакторы (например, DreamWeaver) и онлайн (например, любой современный конструктор сайтов.

Для библиотеки VCL фирмой Borland реализована собственная версия интерфейса Drag&Drop (переводится как "перетащить"). Интерфейс этот внутренний - передавать и принимать можно любые управляющие элементы Delphi внутри формы" (кроме самой формы). Он реализован без использования соответствующих функций API Windows - их нужно применять при организации общения с другими задачами путем перетаскивания.

Нажав левую кнопку мыши над элементом управления, мы можем "перетащить" его на любой другой элемент. С точки зрения программиста это означает, что в моменты перетаскивания и отпускания клавиши генерируются определенные события, которыми передается вся необходимая информация - указатель на перетаскиваемый объект, текущие координаты курсора и др. Получателем событий является тот элемент, на котором в данный момент находится курсор. Обработчик такого события должен сообщить системе, принимает ли данньш элемент управления "посылку" или нет. При отпускании кнопки над принимающим элементом управления генерируется еще одно или два события, в зависимости от готовности приемника.

CancelDrag Отменяет текущую drag-and-drop или drag-and-dock операцию.

Функция FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Функция возвращает объект базового класса TControl , к которому относится позиция экрана с координатами, определенными параметром Pos. Данная функция используется для определения потенциального получателя drag-and-drop или drag-and-dock операции. Если для указанной позиции не существует никакого оконного средства управления, то функция возвращает nil . Параметр AllowDisabled определяет, будут ли учитываться заблокированные (disabled) объекты.

Функция IsDragObject (Sender: TObject ): Boolean ;

Функция определяет, является ли объект, определенный в параметре Sender, потомком класса TDragObject . Данную функцию можно использовать в качестве параметра Source в обработчиках событий OnDragOver и OnDockOver для того, чтобы определить будет ли принят перетаскиваемый объект. Также функцию IsDragObject можно использовать в качестве параметра Source в обработчиках событий OnDragDrop и OnDockDrop для того, чтобы правильно интерпретировать перетаскиваемый объект.

Свойства DragMode, DragCursor, методы BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, параметр Accept

Процесс перетаскивания с помощью мыши информации из одного объекта в другой широко используется в Widows.Можно перемещать файлы между папками, перемещать сами папки и др.

Все свойства, методы и события, связанные с процессом перетаскивания, определены в классе TControl, являющегося прародителем всех визуальных компонентов Delphi. Поэтому они являются общими для всех компонентов.

Начало перетаскивания определяется свойством DragMode, которое может устанавливаться в процессе проектирования или программно равным dmManual или dmAutomatic. Значение dmAutomatic (автоматическое) определяет автоматическое начало процесса перетаскивания при нажатии пользователем кнопки мыши над компонентом. Однако в этом случае событие OnMouseDown, связанное с нажатием пользователем кнопки мыши, для этого компонента вообще не наступает.

Интерфейс переноса и приема компонентов появился достаточно давно. Он обеспечивает взаимодействие двух элементов управления во время выполнения приложения. При этом могут выполняться любые необходимые операции. Несмотря на простоту реализации и давность разработки, многие программисты (особенно новички) считают этот механизм малопонятным и экзотическим. Тем не менее использование Drag-and-Drop может оказаться очень полезным и простым в реализации. Сейчас мы в этом убедимся.

Для того чтобы механизм заработал, требуется настроить соответствующим образом два элемента управления. Один должен быть источником (Source), второй - приемником (Target). При этом источник никуда не перемещается, а только регистрируется в качестве такового в механизме.

Поверьте, достаточно просто преобразовать X,Y координаты, передаваемые в параметрах событий OnDragOver и OnDragDrop, в координаты формы.

Работайте со свойствами Left и Top компонента, над которым перемещается курсор. Приведу простой пример. Поместите на форму компонент Memo и присвойте свойству Align значение alTop. Поместите на форму панель, также присвойсте свойству Align значение alTop и задайте небольшое значение свойству Height, скажем 6 или 7 пикселей. Установите DragMode на dmAutomatica и DragCursor на crVSplit. Поместите другой Memo-компонент и установите Align на alClient. Одновременно выберите оба Memo-компонента, панель и создайте общий обработчик события OnDragOver как показано ниже:

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.

For web sites, extensions, and XUL applications, you can customize which elements can become draggable , the type of feedback the draggable elements produce, and the droppable elements.

This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.

Drag Events Event On Event Handler Fires when…

drag	ondrag	…a dragged item (element or text selection) is dragged.
dragend	ondragend	…a drag operation ends (such as releasing a mouse button or hitting the Esc key; see Finishing a Drag .)
dragenter	ondragenter	…a dragged item enters a valid drop target. (See Specifying Drop Targets .)
dragexit	ondragexit	…an element is no longer the drag operation"s immediate selection target.
dragleave	ondragleave	…a dragged item leaves a valid drop target.
dragover	ondragover	…a dragged item is being dragged over a valid drop target, every few hundred milliseconds.
dragstart	ondragstart	…the user starts dragging an item. (See Starting a Drag Operation .)
drop	ondrop	…an item is dropped on a valid drop target. (See Performing a Drop .)

Note: Neither dragstart nor dragend events are fired when dragging a file into the browser from the OS.

Interfaces The basics

This section is a summary of the basic steps to add drag-and-drop functionality to an application.

Identify what is draggable

Making an element draggable requires adding the draggable attribute and the ondragstart global event handler, as shown in the following code sample:

function dragstart_handler(ev) { // Add the target element"s id to the data transfer object ev.dataTransfer.setData("text/plain", ev.target.id); } window.addEventListener("DOMContentLoaded", () => { // Get the element by id const element = document.getElementById("p1"); // Add the ondragstart event listener element.addEventListener("dragstart", dragstart_handler); });

This element is draggable.

For more information, see:

Handle the drop effect

The handler for the drop event is free to process the drag data in an application-specific way.

Typically, an application uses the getData() method to retrieve drag items and then process them accordingly. Additionally, application semantics may differ depending on the value of the