Функція "Drag and Drop" може допомогти збільшити продуктивність вашого iPad. Ось як її можна використовувати.
Таким чином, ви можете перемістити файл з однієї хмарної служби зберігання до іншої, скопіювати текст із Safari до програми для редагування тексту, щоб додати цитату або створити резервну копію певних фотографій у додатку для зберігання файлів.
Як перетягувати фотографії, файли та текст1. Торкніться та утримуйте фотографію, файл або виділений текст, який потрібно перетягнути до іншої програми.
2. Перетягніть елемент у потрібне місце в цій програмі або іншу, яку ви відкрили в режимі Slide Over або Split View, і відпустіть.
1. Торкніться та утримуйте одну з фотографій або файлів, які потрібно перетягнути.
2. Під час перетягування поточного елемента торкніться іншої фотографії або файлу, який потрібно перетягнути. Зробіть це знову з такою кількістю елементів, які хочете перемістити.
3. Перетягніть усі вибрані об'єкти в призначене місце в іншу програму, яку ви відкрили в режимі "Slide Over" або "Split View" і відпустіть їх.
1. Торкніться та утримуйте частину тексту, яку потрібно перетягнути, щоб виділити її.
2. Використовуйте точки виділення, щоб виділити решту тексту, яку потрібно перетягнути.
3. Натисніть та утримуйте виділений текст.
4. Перетягніть текст у програму, в якій ви хочете розмістити його та відпустіть.
У той час як більшість функцій перетягування в iOS працюють тільки на iPad, цей трюк фактично працює як на iPhone, так і на iPad. Це дозволяє впорядковувати розташування програм на головному екрані за допомогою "Drag and Drop", а не переміщати їх по одному.
1. Натисніть і утримуйте піктограму програми, яку потрібно змінити на головному екрані.
2. Торкніться додаткових програм, які потрібно перемістити.
3. Перетягніть ці програми на сторінку або папку, в якій вони повинні знаходитися, та відпустіть їх.
182
У цьому прикладі ми вибираємо елемент div і робимо його, що переміщується шляхом виклику для нього методу draggable() . Як показано на малюнку нижче, у документі елемент займає свою звичайну позицію, але після цього його можна перемістити за допомогою покажчика миші в будь-яке місце у вікні браузера:
Можливість перетягування елементів корисна вже сама по собі, але вона приносить ще більше користі, якщо застосовується у поєднанні із взаємодією Droppable, яка описана далі.
Взаємодія Draggable реалізується виключно за рахунок використання специфічної HTML-розмітки та CSS-стилів. Це означає, що ця функціональність працюватиме практично в будь-якому браузері, але наділені нею елементи не зможуть працювати з аналогічними власними засобами Drag-and-drop операційних систем.
Операції Drag-and-drop, що визначаються специфікацією HTML5 операції, зазвичай реалізуються з використанням власних механізмів операційних систем. Якщо ви використовуєте механізм Drag-and-drop jQuery UI, то, щоб уникнути конфліктних ситуацій, еквівалентні засоби HTML5 краще відключити. Для цього встановіть для атрибуту draggable елемента body документа значення false.
Налагодження взаємодії DraggableІснує безліч опцій налаштування для взаємодії Draggable. Найбільш важливі властивості, розгляд яких присвячені наступні розділи, наведені в таблиці нижче:
| axis | Обмежує можливості переміщення певними напрямами. Значення за промовчанням - false, воно означає відсутність обмежень, але можна також вказати значення "x" (переміщення лише вздовж осі X) або "y" (переміщення лише вздовж осі Y) |
| containment | Обмежує розташування елемента, що переміщується, певною областю екрана. Типи значень, що підтримуються, описані в таблиці нижче, при розгляді відповідного прикладу. Значення за промовчанням – false, воно означає відсутність обмежень |
| delay | Визначає час, протягом якого має здійснюватись перетягування елемента, перш ніж він переміститься. Значення за замовчуванням – 0, воно означає відсутність затримки |
| distance | Визначає відстань, на яку користувач повинен перетягнути елемент з його початкової позиції, перш ніж він переміститься. Значення за замовчуванням – 1 піксель |
| grid | Здійснює примусову прив'язку елемента, що переміщається до осередків сітки. Значення за промовчанням – false, воно означає відсутність прив'язки |
Існує кілька способів, за допомогою яких можна обмежити переміщення елемента певними напрямками. Перший полягає у використанні опції axis, що дозволяє обмежити напрямок переміщення віссю X чи Y. Відповідний приклад наведено нижче:
... div.dragElement (font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px ) $(function() ( $ (".dragElement").draggable(( axis: "x" )).filter("#dragV").draggable("option", "axis", "y"); )); Перетягнути по вертикалі Перетягнути по горизонталі Запустити приклад
У цьому прикладі ми визначаємо два елементи div, вибираємо їх за допомогою jQuery та викликаємо метод draggable(). Як аргумент цього методу передається об'єкт, який спочатку обмежує переміщення обох елементів div напрямком вздовж осі X. Застосувавши потім метод jQuery filter(), ми отримуємо можливість вибрати елемент dragV без повторного пошуку засобами jQuery по всьому документу і встановити для нього інший дозволений напрямок переміщення - вздовж осі Y. Таким чином, ми отримуємо документ, в якому один елемент div можна перетягувати лише у вертикальному напрямку, а інший – лише у горизонтальному. Результат представлений малюнку:
Можна також обмежити область екрана, в якій можна перетягувати елемент. Для цього використовується опція containment. Формати значень, які можна вказувати в цій опції, описані в таблиці нижче:
Приклад використання опції containment наведено нижче:
... div.dragElement (font-size: large; border: thin solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px ) #container ( border: medium double black; width: 700px; height: 450px) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " axis", "x"); )); Перетягнути по горизонталі Перетягнути всередині батька Запустити приклад
У цьому прикладі можливості переміщення обох елементів обмежені таким чином, що їх можна перетягувати тільки всередині батьківського елемента, як виступає елемент div з фіксованими розмірами. Для одного з елементів div, що переміщуються, за допомогою опції axis введено додаткове обмеження, що полягає в тому, що він може переміщатися всередині батьківського елемента тільки в горизонтальному напрямку. Результат проілюстрований на малюнку:
Опція grid дозволяє задати прив'язку елемента, що переміщається, до осередків сітки. Ця опція приймає як значення масив з двох елементів, що визначають ширину та висоту осередків сітки в пікселях. Приклад використання опції grid наведено нижче:
... #draggable (font-size: x-large; border: thin solid black; width: 5em; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( (Grid:));)); Перетягніть мене Запустити приклад
У цьому прикладі задана сітка з осередками шириною 100 пікселів та висотою 50 пікселів. Коли ви перетягуєте елемент, він "перескакується" з одного (невидимого) осередку до іншого. Ефект прив'язки є дуже показовим прикладом використання функціональності взаємодій, проте його важко передати за допомогою екранних знімків.
Можна створити ефект прив'язки лише для одного напрямку, вказавши для осі вільного переміщення значення 1. Наприклад, якщо присвоїти опції grid значення , то елемент буде прив'язуватися до осередків сітки шириною 100 пікселів при переміщенні по горизонталі, але переміщення по вертикалі буде вільним.
Затримка переміщенняІснують дві опції, що дозволяють організувати затримку при перетягуванні елемента, що переміщається. За допомогою опції delay можна встановити час у мілісекундах, протягом якого користувач повинен перетягувати покажчик миші, перш ніж елемент буде дійсно переміщений. Інший вид затримки забезпечується опцією distance, що визначає відстань у пікселях, на яку користувач повинен перетягнути покажчик миші, перш ніж за ним піде елемент.
Приклад використання обох налаштувань наведено нижче:
... #time, #distance (font-size: large; border: thin solid black; padding: 10px; width: 120px; text-align: center; background-color: lightgray; margin: 4px; ) $(function( ) ( $("#time").draggable(( delay: 1000 )) $("#distance").draggable(( distance: 150 )) )); Блок із затримкою часу Блок із мінімальною відстанню Запустити приклад
У цьому прикладі є два елементи, що переміщаються, для одного з яких затримка задана за допомогою опції delay, а для іншого - за допомогою опції distance.
У разі затримки, яка визначається опцією delay, користувач повинен виконувати перетягування протягом заданого часу, перш ніж це призведе до дійсного переміщення елемента. У цьому прикладі тривалість цього проміжку становить 1000 мс. Переміщати мишу в цей час зовсім не обов'язково, але протягом всього періоду затримки кнопка миші повинна залишатися в натиснутому стані, після чого елемент можна буде перемістити, зрушивши мишу. Після закінчення часу затримки елемент, що переміщається, прив'яжеться до розташування покажчика миші з урахуванням обмежень, що накладаються опціями grid, region і axis, про які раніше говорилося.
Опція distance має схожу дію, але в цьому випадку користувач повинен перетягнути покажчик миші не менше ніж на задану кількість пікселів у будь-якому напрямку від початкового розташування елемента. Після цього елемент, що переміщається, стрибкоподібно переміститься до поточного розташування покажчика.
Якщо застосувати обидві налаштування одному й тому елементу, то переміщуваний елемент не зрушить з місця до того часу, доки будуть виконані обидва критерію затримки, тобто. поки спроба перетягування елемента не триватиме протягом заданого часу і поки покажчик миші не переміститься на задану кількість пікселів.
Використання методів взаємодії DraggableУсі методи, визначені для взаємодії Draggable, входять у набір базових методів, із якими ви вже познайомилися під час розгляду віджетів. Методи, специфічні для взаємодії Draggable, не передбачені, тому ми не розглядатимемо їх докладно. Перелік доступних методів наведено в таблиці нижче:
Використання подій взаємодії DraggableВзаємодія Draggable підтримує простий набір подій, що повідомляють про перетягування елемента. Ці події описані в таблиці нижче:
Як і у випадку віджетів, на ці події також можна реагувати. Приклад обробки подій start і stop наведено нижче:
... #draggable (font-size: x-large; border: thin solid black; width: 190px; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Перетягування...") ), stop: function() ( $("#draggable").text("Перетягни мене") ) )) ;)); Перетягніть мене Запустити приклад
У цьому прикладі події start і stop використовуються для зміни вмісту тексту в процесі перетягування. Ця сприятлива можливість є наслідком того, що взаємодія Draggable реалізована виключно з використанням засобів HTML і CSS: можна використовувати jQuery для зміни стану елемента, що переміщується навіть у той час, коли він рухається по екрану.
Використання взаємодії DroppableУ деяких ситуаціях лише можливості перетягування елемента може бути цілком достатньо, але найбільшу користь воно приносить у тих випадках, коли використовується спільно з взаємодією Droppable.
Елементи, до яких була застосована взаємодія Droppable (приймають елементи), набувають здатності приймати елементи, що переміщуються, створені за допомогою взаємодії Draggable.
Приймаючі елементи створюються за допомогою методу droppable() , але для отримання корисної функціональності потрібно створити обробники подій з тих, які визначені для цього виду взаємодії. Доступні події наведені в таблиці нижче:
| create | Відбувається у момент застосування взаємодії Droppable до елементу |
| activate | Відбувається, коли користувач починає перетягувати елемент, що переміщається |
| deactivate | Відбувається, коли користувач припиняє перетягувати елемент, що переміщається |
| over | Відбувається, коли користувач перетягує елемент, що переміщається над приймаючим елементом (але за умови, що кнопка миші ще не була відпущена) |
| out | Відбувається, коли користувач перетягує елемент, що переміщається за межі приймаючого елемента |
| drop | Відбувається, коли користувач залишає елемент, що переміщається на приймаючому елементі |
Приклад створення простого приймаючого елемента, для якого визначено єдиного обробника події drop, наведено нижче:
... #draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) : 20px; position: absolute; right: 5px;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() #draggable").text("Залишено") ) )); )); Залиш тут Перетягни мене Запустити приклад
У цьому прикладі документ містить елемент div, текстовий вміст якого представлений рядком "Залиш тут". Ми вибираємо цей елемент, використовуючи jQuery, і викликаємо метод droppable(), передаючи об'єкт з налаштуваннями, який визначає обробник для події drop. Відповіддю на цю подію є зміна тексту елемента, що переміщується за допомогою методу text().
Інтерактивна взаємодія категорії Drag-and-drop, що створюється в даному прикладі, є найпростішою, але вона створює зручний контекст для пояснення можливостей спільної роботи взаємодій Draggable і Droppable. Різні стадії процесу перетягування елементів проілюстровані малюнку:
Все це дуже просто. Ми перетягуємо елемент, що переміщається, доки він не опиниться над приймаючим елементом, і відпускаємо його. Елемент, що переміщається, залишається там, де він був залишений, і його текстовий вміст змінюється у відповідь на наступ події drop. У наступних розділах показано, як використовувати інші події взаємодії Droppable для підвищення комфортності роботи користувача.
Підсвічування цільового приймаючого об'єктаВикористовуючи події activate і deactivate, можна підсвітити цільовий об'єкт, що приймає, коли користувач починає процес перетягування елемента. У багатьох ситуаціях ця ідея виявляється дуже плідною, оскільки користувач отримує надійну вказівку щодо того, які елементи є частиною моделі Drag-and-drop. Відповідний приклад наведено нижче:
... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Залишено) ") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" ));)), deactivate: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ... Запустити приклад
Як тільки користувач починає перетягувати елемент, спрацює подія activate - пов'язана з нашим приймаючим елементом, і функція-обробник використовує метод css() для зміни CSS-властивостей border та background-color цього елемента. В результаті цільовий приймаючий елемент підсвічується, вказуючи користувачу на існування зв'язку між ним і елементом, що переміщається.
Подія deactivate використовується для видалення значень CSS-властивостей з приймаючого елемента та його повернення у вихідний стан, як тільки користувач відпускає кнопку миші. (Ця подія відбувається щоразу, коли перетягування елемента припиняється, незалежно від того, чи залишений елемент, що переміщається, на приймаючому елементі або не залишений.) Цей процес проілюстрований на малюнку:
Технологію Drag-and-drop можна вдосконалити, додавши до неї обробку подій over і out. Подія over відбувається, коли 50% переміщуваного елемента виявляється над будь-якою частиною елемента, що приймає. Подія out настає тоді, коли елементи, що перекривалися раніше, перестають перекриватися. Приклад реакції у відповідь на ці події наведено нижче:
$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Залишено") )) , activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ); Запустити приклад
Тут використані самі функції-обработчики, що у попередньому прикладі, але у разі вони пов'язані з подіями over і out. Коли з приймаючим елементом перекривається принаймні 50% елемента, що переміщається, він полягає в рамку і колір його фону змінюється, як показано на малюнку:
Вказана 50%-на межа називається порогом перекривання (tolerance), величину якого можна задавати при створенні приймаючого елемента, як буде показано далі.
Налагодження взаємодії DroppableДля взаємодії Droppable передбачено низку властивостей, шляхом зміни яких можна налаштувати його поведінку. Ці властивості перелічені у таблиці нижче:
| disabled | Якщо ця опція дорівнює true, функціональність взаємодії Droppable спочатку відключена. Значення за промовчанням - false |
| accept | Звужує безліч елементів, що переміщаються, на які буде реагувати приймаючий елемент. Значення за промовчанням - *, йому відповідає будь-який елемент |
| activeClass | Визначає клас, який присвоюватиметься у відповідь на подію activate та видалятиметься у відповідь на подію deactivate |
| hoverClass | Визначає клас, який присвоюватиметься у відповідь на подію over та видалятиметься у відповідь на подію out |
| tolerance | Визначає мінімальний ступінь перекривання, за якого відбувається подія over |
Можна обмежити безліч елементів, що переміщуються, які будуть прийматися елементом, наділеним функціональністю взаємодії Droppable, за допомогою опції accept. Як значення опції accept слід присвоїти селектор. В результаті цієї події взаємодії Droppable відбуватимуться лише в тому випадку, якщо елемент, що переміщається, відповідає зазначеному селектору. Відповідний приклад наведено нижче:
... .draggable, #droppable (font-size: large; border: thin solid black; padding: 10px; width: 100px; text-align: center; background-color: lightgray; margin: 4px;) : 20px; position: absolute; right: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable")). ui.draggable.text("Залишено") ), activate: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function () ( $("#droppable").css("border", "").css("background-color", ""); ), accept: "#drag1" )); )); Залишити тут Елемент 1 Елемент 2 Запустити приклад
У цьому прикладі є два елементи, що переміщуються з ідентифікаторами drag1 і drag2. При створенні приймаючого елемента використовується опція accept, за допомогою якої ми вказуємо, що прийнятним елементом, що переміщається, буде тільки елемент drag1.
При перетягуванні елемента drag1 ви спостерігатимете той самий ефект, що й у попередніх прикладах. У відповідні моменти для елемента, що приймає, будуть запускатися події activate, deactivate, over і out. У той же час, якщо перетягувати елемент drag2, який не відповідає вказаному в параметрі accept селектору, ці події запускатися не будуть. Цей елемент можна вільно переміщати, але він не сприйматиме приймаючий елемент.
Зверніть увагу на зміну способу вибору прийнятного елемента, що переміщається, для якого слід викликати метод text(). Коли в документі був лише один елемент, що переміщається, для цього вистачало атрибута id:
Drop: function() ( $("#draggable").text("Залишено") ),
У даному прикладі є два елементи, що переміщуються, і вибір по атрибуту id не дасть бажаного результату, оскільки текст в цьому випадку буде завжди змінюватися в одному і тому ж елементі, що переміщається, незалежно від того, який з них є прийнятним для приймаючого елемента.
Вихід полягає в тому, щоб використовувати об'єкт ui, який jQuery UI надає як додатковий аргумент кожному обробнику подій. Властивість draggable об'єкта ui повертає об'єкт jQuery, що містить елемент, який користувач перетягує або намагається залишити на цільовому елементі, що дозволяє вибрати потрібний елемент таким чином:
Drop: function(event, ui) (ui.draggable.text("Залишено")),
Зміна порога перекриванняЗа умовчанням подія over відбувається лише в тих випадках, коли принаймні 50% елемента, що переміщається, перекривається з приймаючим елементом. Величину цього порогового перекриття можна змінити за допомогою опції tolerance, яка може набувати значень, зазначених у таблиці нижче:
Найчастіше я використовую два значення, fit і touch, оскільки їхній зміст найбільш зрозумілий для користувачів. Значення fit використовується мною в тих випадках, коли елемент, що перетягується, повинен залишитися в тій області приймаючого елемента, в яку він був переміщений, а значення touch - коли переміщений елемент повинен повернутися у вихідну позицію (відповідний приклад буде наведено далі). Приклад використання параметрів fit та touch наведено нижче:
Значення clone вказує jQuery UI на те, що необхідно створити копію елемента, що переміщається разом з усім його вмістом і використовувати отриманий результат як допоміжний елемент. Результат представлений малюнку:
Допоміжний елемент видаляється, коли користувач відпускає кнопку миші над елементом, що переміщається, залишаючи переміщається і приймає елементи в їх вихідних позиціях.
Як показано на малюнку, вихідний елемент, що переміщається, залишається на своєму місці і лише допоміжний елемент переміщається по екрану слідом за покажчиком миші. Якщо розміри переміщуваного елемента великі, як і прикладі, він закриває собою інші елементи документа, отже навіть відстежити позицію приймаючого елемента користувачеві буде важко. З цією проблемою можна впоратися, надавши функцію як значення опції helper, як показано в прикладі нижче:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Запустити приклад
Коли користувач починає перетягувати елемент, jQuery UI викликає функцію, задану параметром helper, і використовує елемент, що повертається як об'єкт, що переміщається. В даному випадку я використовую jQuery для створення елемента img. Результат представлений малюнку:
Невелике зображення відіграє роль заступника елемента, що переміщується, що значно спрощує відстеження інших елементів документа.
Об'єкт ui, який jQuery UI передає подіям взаємодії Droppable, містить властивість helper, і цю властивість можна використовувати для маніпуляцій допоміжним елементом у процесі його перетягування. Приклад використання цієї властивості у зв'язці з подіями over та out наведено нижче:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) (ui.helper.css("border", ""))))); )); ...
Тут події over і out, а також властивість ui.helper використовуються для відображення рамки навколо допоміжного елемента, коли він перекриває елемент, що приймає. Результат представлений малюнку:
За допомогою опції snap можна домогтися того, щоб елемент, що переміщається, як би "притягувався" до країв елементів, поряд з якими він проходить. Як значення ця опція набирає селектор. Елемент, що переміщається, буде прив'язуватися до країв будь-якого елемента, відповідного зазначеному селектору. Приклад використання опції snap наведено нижче:
Запустити приклад jQuery UI #snapper, .draggable, .droppable (font-size: large; border: medium solid black; padding: 4px; width: 150px; text-align: center; background-color: lightgray; margin-bottom: 10px ;) .droppable (margin-right: 5px; height: 50px; width: 120px) #dropContainer (position: absolute; right: 5px;) div span (position: relative; top: 25%) .droppable.active (border: medium solid green) .droppable.hover (background-color: lightgreen) #snapper (position: absolute; left: 35%; border: medium solid black; width: 180px; height: 50px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover"));)); Кошик Прив'яжися тут Перетягни мене
Коли елемент, що переміщається, наближається до одного з відповідних елементів, він як би "притягується" до нього таким чином, що їх сусідні краї стикаються. Для такої прив'язки можна вибрати будь-який елемент, а не лише приймаючий. У цьому прикладі я додав елемент div і визначив для опції snap значення, яке вибирає в документі даний елемент, а також елемент, що приймає.
Існує пара допоміжних опцій, що дозволяють точніше налаштувати поведінку елементів щодо прив'язки. Одна з них - це опція snapMode. За її допомогою можна вказати тип прив'язки. Допускаються такі значення: inner(Прив'язка до внутрішніх країв елементів), outer(прив'язка до зовнішніх країв елементів) та both(Прив'язка до всіх країв; використовується за умовчанням).
Опція snapTolerance дозволяє вказати, на яку відстань повинен наблизитися елемент, що переміщається, до краю елемента-мішені, перш ніж відбудеться прив'язка. Значення за замовчуванням – 20, що означає 20 пікселів. У прикладі використовується значення 50 якому відповідає прив'язка на більшій відстані. Дуже важливо правильно вибрати значення цієї опції. Якщо значення опції snapTolerance занадто мало, то користувач може не помітити ефекту прив'язки, а якщо воно занадто велике, то елемент, що переміщається, почне робити несподівані стрибки, прив'язуючись до далеко розташованих елементів.
Нещодавно у мене з'явилася ідея зайнятися розробкою гри для андроїд. Спочатку я вирішив написати шахи. Мені здавалося технологія Drag and Drop відмінно підійде для реалізації механізму переміщення фігур. Для непосвячених зазначу, що метод drag and drop полягає у можливості перетягування одних графічних об'єктів на інші та виконання тієї чи іншої дії після відпускання. Найпростіший приклад – видалення ярлика з робочого столу вашого ПК перетягуванням його в кошик. "Кинувши" ярлик у кошик, ми говоримо системі, що хочемо змусити взаємодіяти ці два об'єкти. Система отримує наш сигнал і вирішує, яку дію їй варто зробити. Drag and drop набула широкого поширення завдяки своїй інтуїтивній ясності. Цей підхід підкріплений нашим досвідом взаємодії з об'єктами реального світу та чудово працює у віртуальному середовищі. Що ж до шахів, за допомогою drag and drop технологічно простіше визначити клітину, куди користувач перетягнув фігуру, оскільки не потрібно обчислювати номер клітини за координатами точки відпускання. Цю роботу візьме він віртуальна машина.
Використання технології drag and drop дозволяє мені малою кров'ю вирішити три завдання:
Завдання позначені, приступимо до їх реалізації.
Підміна ImageView під час торканняУсі мої фігури є об'єктами ImageView. На жаль, виявилося, що реалізація Drag & Drop в Android не дозволяє "прямо з коробки" здійснювати заміну зображення об'єкта при його торканні. Тим не менш, це завдання цілком вирішуване засобами API. Нам знадобиться виконати низку нескладних дій:
Ці дії необхідно реалізувати в обробнику 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 (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View. INVISIBLE) ; return true ;Все дуже просто. Отже, із заміною зображення розібралися, перейдемо до наступного завдання.
Обмеження області перетягування для функції drag dropОбмеження області перетягування пов'язані з однією проблемою. Справа в тому, що якщо відпустити фігуру за межами дошки, події drop не трапиться, оскільки користувач відпустив об'єкт на порожньому місці, і об'єкту нема з чим взаємодіяти. В результаті постать не повернеться у свій первісний стан і так і залишиться назавжди захованою. Я вбив багато часу на читання документації, але так і не знайшов способу обмежити область перетягування об'єктів. Осяяння прийшло раптово. Мені зовсім не потрібно обмежувати область, мені потрібно дізнатися, чи правильно користувач відпустив фігуру чи ні.
Визначення правильності відпускання
Відповіді на свої запитання я знайшов у розділі handling drag end events на сайті Android Developers. Ось кілька ключових моментів:
Таким чином, мені потрібно перехопити подію 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= if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) = DragEvent.ACTION_DROP&&containsDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ult( ) ; )Тепер користувач може будь-де відпускати фігуру, і нічого страшного не станеться.
Визначення допустимих ходівОстання частина статті присвячена перевірці допустимості ходу, яку намагається зробити користувач. Перш ніж докладно розпочати обговорення цієї теми, зроблю невелику ремарку, яка пояснює структуру мого додатка. Шахова дошка представлена як TableLayout, а кожна клітина є нащадком LinearLayout і має OnDragListener.
Крім того, кожен OnDragListener посилається на об'єкт "посередника" (mediator), який піклується про взаємодію ігрових об'єктів та запам'ятовує положення поточної клітини.
Коли користувач тягне фігуру над клітиною, можливі такі дії:
Нижче наведено код, який реалізує описану логіку
@ Override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( containsDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) = DragEvent.Як бачите, незалежно від того чи допустимий хід чи ні, ImageView переводиться у видимий стан. Я хотів, щоб користувач бачив, як рухається фігура. Раніше я згадував, що клітина є нащадком LayoutView. Це зроблено для того, щоб простіше переміщати ImageView від клітини до клітини. Нижче наводиться код методу checkForValidMove, який показує, як відбувається переміщення ImageView.
private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. (Gravity. CENTER) ; view. showAsLanded() ; mediator. handleMove(view) ; ) )Сподіваюся, ця стаття допоможе Вам під час розробки власних проектів.
Де елементи GUI реалізовані за допомогою псевдографіки) за допомогою маніпулятора "миша" або сенсорного екрану.
Спосіб реалізується шляхом «захоплення» (натисканням та утриманням головної ( першою, частіше лівої) кнопки миші) відображуваного на екрані комп'ютера об'єкта, програмно доступного для подібної операції, і переміщення його в інше місце (для зміни розташування) або "кидання" його на інший елемент (для виклику відповідного, передбаченого програмою, дії). По відношенню до вікон (також здатним до переміщення подібним способом) цей термін зазвичай не вживається.
Базовими діями і найпростішими прикладами drag-and-drop дій є: переміщення об'єкта, переміщення об'єкта з панелі в панель, хоча в сучасних операційних системах drag-and-drop отримав широке застосування і є одним з головних способів взаємодії з комп'ютером у графічному інтерфейсі користувача.
Об'єктами для переміщення можуть бути такі елементи інтерфейсу: значки (іконки) Робочого столу, плаваючі панелі інструментів, ярлики програм в Панелі завдань (починаючи з Win XP), елементи TreeView, текстовий рядок, осередок DataGridView., а також елементи OLE. Переміщатися об'єкти можуть як у межах певної області, в межах одного вікна між панелями одного вікна, так і між різними вікнами.
Подія перетягування повинна ініціюватись якоюсь дією користувача. Найчастіше цією дією є натискання лівої кнопки миші на елементі (подія це називається MouseDown), який може бути переміщений у своєму контейнері. Деякі компоненти мають власні події початку drag-n-drop - наприклад, TreeView має подію ItemDrag.
Wikimedia Foundation. 2010 .
Дивитись що таке "Drag-and-drop" в інших словниках:Drag and drop - 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV> das Anklicken herramientas Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [engl. drag „ziehen“ + and „und“ + drop „fallen… … Universal-Lexikon
Форма виконання будь-яких дій у графічних інтерфейсах користувача, що передбачає використання комп'ютерної миші. У перекладі з англійської означає буквально: тягни та кидай. Дія виконується шляхом оперування видимими на екрані.
drag and drop - (computing) Натисніть на icon, файл, etc.
drag and drop - IT для переміщення деякої з однієї області комп'ютера, щоб використовувати інші інструменти: »Файзер дозволяє вам drag and drop elements for page images, text, etc. anywhere you want. Main Entry: drag … Financial and business terms
drag-and-drop - UK US verb n.; Gen.: ; Pl.: unz.; EDV> das Anklicken herramientas Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird )
