Drag-and-drop: спосіб оперування елементами інтерфейсу користувача

Найпростіше щось взяти і покласти, ніж писати, що треба взяти і куди покласти. Звичайно без мишки, або подібного їй пристрою, нічого не вибереш і нічого не вкажеш, але навіть в поточному стані речей використання ідеї «drag and drop» дуже природно і комфортно. Область застосування ідеї - далеко не тільки інтернет-магазини, електронні бібліотеки, пошукові або інформаційні системи, а і прикладна сфера. Ідея дуже навіть застосовна в розробці сайтів та їх елементів, що створюються і супроводжуваних інтерактивно, без участі програміста.

Опис ідеї

Вибрати, перемістити і покласти - ідея природна і зручна. Просто дивно, що вона не народилася, коли мишка стала незамінним аксесуаром комп'ютера. Найочевидніший приклад - вибір товару в інтернет-магазині. Взяти мишкою потрібний товар і перетягнути його в кошик для покупок - просто, природно і зручно. Завантаження файлів: взяти документ за межами вікна браузера і покласти його на елемент сторінки, ініціювавши тим самим передачу документа на сервер - також практична ідея. Для розробника ідея «drag and drop» - це маніпулювання елементами сторінки без ручного перерахунку координат і розмірів тегів, можливість вибору декількох елементів і вирівнювання їх, а також переміщення сторін блокових тегів.

HTML і CSS - відмінні мови опису тегів і стилів їх оформлення, але коли розробник має можливість інтерактивно маніпулювати елементами сторінки без ручного перерахунку координат і розмірів, це робить роботу більш комфортною і ефективною.

Просте перенесення файлів

«Drag and drop»: переклад з англійської на російську буквально звучить «тягни і кидай». На практиці це звучить і діє краще: вибрав, переніс і відпустив - просто і природно. Реалізувати на сторінці передачу файлів на сторінку, на сервер або для іншого використання дуже просто. В даному прикладі мишкою було вибрано декілька файлів на робочому столі (лівий рисунок). На виділенні була натиснута ліва кнопка мишки і вибране «поїхало» в кошик. Браузер сам показав, як це відбувається, написав підказку «копіювання» і навколо створив контури переміщуються файлів.
Коли мишка опинилася над кошиком, відвідувач відпустив ліву кнопку мишки, подія «тягни і кидай» відбулося і на сторінці сайту (нижній малюнок) jаvascript-код зміг отримати та обробити всі файли, які відвідувач надав сторінці (сайту).

Опис реалізації

Код, який виконує цю процедуру, дуже простий. Його повторити в будь-яких варіантах використання може навіть початківець розробник. Тут інтерфейс користувача представлений двома тегами: scPlaceFile (це сама кошик, куди потрібно покласти файли) і scPlaceFiles (це результат обробки файлів, в даному випадку їх список). Логіка роботи сторінки така. При завантаженні сторінки в браузері в кошику призначається обробник події «ondrop» - покласти, інші події блокуються і не використовуються. Сторінка працює в штатному режимі, але як тільки відвідувач вибере файл (файли) і перетащит їх на картинку кошики, тобто на тег scPlaceFile, буде запущена обробка події «файли приїхали».

Даний обробник просто виводить список файлів. Їх кількість знаходиться в event.dataTransfer.files.length, а інформація про кожному файлі event.dataTransfer.files[i].name. Що робити з отриманими даними, визначає розробник, в даному випадку просто формується список отриманих файлів. Після обробки подія блокується і не поширюється. Це необхідно, щоб браузер не займався самодіяльністю і не втручався в процес обробки отриманої інформації.

DnD і зовнішні дані

Завантаження зображень на сервер в «drag and drop» - звичайна практика застосування цієї технології. Як правило, розробник створює форму для завантаження файлу (1), яка працює звичайним чином (2). Відвідувач може в звичайному режимі вибирати файли та завантажувати їх.
Однак якщо відвідувач на певне місце форми зробить «drag and drop», то поле імені файлу (файлів) заповниться автоматично. Це хороше рішення. Допустити, що на комп'ютері немає мишки, звичайно, дуже важко. Але краще розробити інтерфейс користувача у звичайному варіанті і в DnD-реалізації.

DnD і внутрішні дані

Турбота про інтереси відвідувача завжди важлива, але проблеми розробника також мають значення. Реалізувати «drag and drop» можна не тільки стандартними засобами, але і за допомогою обробки подій мишки на елементах сторінки. Завдання розрахунку значень координат тегів і їх розмірів виникає постійно. Ручний розрахунок - хороша практика, але інтерактивний варіант більш зручний. Всі теги завжди мають прямокутну форму і, відстежуючи «мишачі» події на сторонах елементів, можна створити можливість автоматичного переміщення елементів в потрібне місце сторінки, або зміни їх. Обробка події натискання кнопки мишки - запам'ятовування координат місця кліка, наприклад, однією із сторін елемента. Переміщення мишки - сторона переміщається в потрібному напрямку. Відпускання кнопки мишки - сторона зупиняється, а її координати змінюються. Так, можна змінити положення елемента або його розмір. Формально це не «drag and drop», але ефект аналогічний і практичний. Зробивши універсальні обробники для будь-якого елемента сторінки, можна отримати хороший інтерактивний результат, прискорити розробку і спростити код.

Візуальне і ручне програмування

Мишка на комп'ютері і пальці на смартфоні - абсолютно різні підходи до реалізації інтерфейсу користувача (відвідувач, розробник). Є цілком природним і сучасним вимога кросбраузерності. Все це в сукупності ускладнює створення сторінок, але застосовуючи ідею «drag and drop» в її стандартній формі, використовуючи її події, суміщаючи цю ідею зі звичайними подіями на елементах, можна реалізувати механізм, при якому створення сторінки буде відбуватися візуально. Зараз давайте розглянемо вибір елементу або елементів. Факт вибору - поява контекстного меню, наприклад, мета - вирівнювання виділеного (ліворуч, праворуч, по центру), або розподіл елементів по вертикалі або горизонталі з однаковим кроком, або зміна їх розмірів (щодо мінімального, максимального). Автоматичний перерахунок координат і розмірів переважно ручного. Менше помилок - швидше досягається мета. Крім того, можна зробити станицю в одному браузері, зберегти положення і розміри елементів. Відкривши цю сторінку на смартфоні, можна поправити значення координат і розмірів і запам'ятати їх для конкретної моделі смартфона або версії браузера. Так одна і та ж сторінка без ручного дотримання вимоги кросбраузерності буде мати різні дані для відображення на різних пристроях і в різних браузерах. Якщо дозволити відвідувачу виконувати ці процедури самостійно, а також вибирати потрібні елементи сторінки з числа передбачених розробником, можна забезпечити кросбраузерність необхідну функціональність сторінки з урахуванням думки користувача.