Для бібліотеки 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 як показано нижче:
Нещодавно у мене з'явилася ідея зайнятися разработкойігри для андроїд. Для початку я вирішив написати шахи. Мені здавалося технологія 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 () \u003d\u003d MotionEvent. ACTION_DOWN) (ClipData clipData \u003d ClipData. NewPlainText ( "", ""); View. DragShadowBuilder dsb \u003d 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 \u003d dragEvent. GetAction (); View dragView \u003d (View) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (containsDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (containsDragable \u003d true;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction \u003d \u003d DragEvent. ACTION_DROP & amp; & amp; containsDragable) (checkForValidMove ((ChessBoardSquareLayoutView) view, dragView); dragView. setVisibility (View. VISIBLE);) return true;) private boolean dropEventNotHandled (DragEvent dragEvent) (return! dragEvent. getResult ( );)Тепер користувач може де завгодно відпускати фігуру, і нічого страшного не станеться.
Визначення допустимих ходів
Остання частина статті присвячена перевірці допустимості ходу, який намагається зробити користувач. Перш ніж докладно приступити до обговорення цієї теми, зроблю невелику ремарку, яка пояснює структуру мого програми. Шахова дошка представлена \u200b\u200bяк 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 \u003d dragEvent. GetAction (); View dragView \u003d (View) dragEvent. GetLocalState (); if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (containsDragable \u003d false;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (containsDragable \u003d true;) else if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. VISIBLE);)) else if (dragAction \u003d \u003d 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 \u003d (ViewGroup) dragView. getParent (); owner. removeView (dragView); view. addView (dragView); view. setGravity (Gravity. CENTER); view. showAsLanded (); mediator. handleMove (view);))Сподіваюся, ця стаття допоможе Вам при розробці власних проектів.
Вже протягом довгого часу існують JavaScript функції, які дозволяють нам створювати drag & drop інтерфейси. Але жодна з цих реалізацій, не є рідною для браузера.У HTML5 є власний метод створення drag & drop інтерфейсів (з невеликою допомогою JavaScript). У цій статті, ми розповімо вам, як цього можна досягти ...
підтримка браузерів
В даний час HTML5 drag & drop підтримується всіма основними браузерами для десктопів (в тому числі IE (навіть в IE 5.5 є часткова підтримка)), але не підтримується жодною з популярних мобільних браузерів.
Drag & Drop події
На кожному етапі перетягування (drag & drop) запускаються різні події для того, щоб браузер знав, який JavaScript код потрібно виконувати. Список подій:
- dragStart: запускається, коли користувач починає перетягувати елементи;
- dragEnter: запускається, коли перетаскується елемент вперше перетягується над цільовим елементом;
- dragOver: спрацьовує при переміщенні миші над елементом, коли відбувається перетягування;
- dragLeave: запускається, якщо курсор користувача залишає елемент при перетягуванні;
- drag: приходить в дію кожного разу, коли ми рухаємо мишею під час перетягування нашого елемента;
- drop: запускається, коли виконується фактичний drop;
- dragEnd: спрацьовує, коли користувач відпускає кнопку миші при перетягуванні об'єкта.
З урахуванням всіх цих слухачів подій, у вас є хороший контроль над тим, як буде працювати інтерфейс.
об'єкт dataTransfer
Саме тут і відбувається все drag & drop диво. Цей об'єкт містить дані, які були відправлені drag операцією. Дані можуть бути встановлені і отримані різними способами, Найбільш важливими з яких є:
- dataTransfer.effectAllowed \u003d value: повертає дозволені типи дій, можливі значення: none, copy, copyLink, copyMove, link, linkMove, move, all і uninitialized.
- dataTransfer.setData (format, data): додає певні дані і формат.
- dataTransfer.clearData (format): очищає всі дані для певного формату.
- dataTransfer.setDragImage (element, x, y): задає зображення, яке ви хочете перетягнути, х і у значення вказують, де повинен бути курсор миші (0, 0 розташує його вгорі ліворуч).
- data \u003d dataTransfer.getData (format): як випливає з назви, він повертає дані для певного формату.
Створення drag & drop прикладу
Тепер ми почнемо створювати простий drag & drop приклад. Як ви бачите, у нас є два маленьких divs і один великий, ми можемо перетягнути маленькі діви всередину великого, і навіть перемістити їх назад.
перетягування об'єкта
Перше, що нам потрібно зробити, це створити HTML. Ми робимо div перетягувати за допомогою draggable атрибута:
Коли це буде зроблено, ми повинні визначити JavaScript функцію, яка буде cрабативать, як тільки ми будемо починати пересувати цей елемент:
Function dragStart (ev) (ev.dataTransfer.effectAllowed \u003d "move"; ev.dataTransfer.setData ( "Text", ev.target.getAttribute ( "id")); ev.dataTransfer.setDragImage (ev.target, 100,100) ; return true;)
У цьому коді, ми спочатку оголошуємо, який тип ефекту дозволяємо в операції і встановлюємо його на move. У другому рядку, ми встановлюємо дані для роботи, де текст буде Text і значенням буде ID елемента, який ми перетягуємо. Після цього, ми використовуємо метод setDragImage, який встановить, що ми будемо перетягувати, а потім, де буде курсор під час перетягування, а так як, кубики 200 на 200 пікселів, ми помістили його в самий центр. В кінці, ми повертаємо return true.
Drop об'єкта
Для того, щоб елемент прийняв drop, він повинен прослухати 3 різних події: dragEnter, dragOver, а також drop події. Так що давайте додамо це до нашого HTML5 в div з ID великого (big):
Function dragEnter (ev) (ev.preventDefault (); return true;) function dragOver (ev) (ev.preventDefault ();)
У першій функції ми визначаємо, що має статися, коли елемент, який ми перетягуємо досягне необхідного елемента, де повинен відбутися drop, в даному випадку ми тільки запобігаємо поведінку браузера за замовчуванням. Наступне, в dragOver функції ми просто не допускаємо, щоб стався drop за замовчуванням.
В наступній частині, ми визначаємо функцію, для того, коли елемент буде "кинутий" на бажаної мети:
Function dragDrop (ev) (var data \u003d ev.dataTransfer.getData ( "Text"); ev.target.appendChild (document.getElementById (data)); ev.stopPropagation (); return false;)
У цій останній частині, ми спочатку встановили змінну data, де ми отримуємо всі дані, які доступні для текстового формату, а потім ми додаємо data до div, де потрібно "кинути" елемент.
Зробити секцію drop метою
У демо показано, що два div можуть бути переміщені назад на свої місця. На щастя, додавання ще однієї drop цілі, набагато простіше, ніж ви думаєте. Тому що ці функції у нас вже є і все, що нам потрібно зробити, це додати слухачі подій:
І це все, що потрібно для того, щоб дозволити перетягування div на колишнє місце.
Існує багато drag & drop додатків, які побудовані з використанням JavaScript бібліотек, і часто використовувати їх простіше. Але ми сподіваємося, що в цій HTML5 і JavaScript техніці, ви побачите майбутній потенціал для вирішення ваших завдань.
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:
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
