Вже багато років ми використовуємо для спрощення складних елементів інтерфейсу, таких як анімації, закруглені кути і перетягування, бібліотеки JQuery і Dojo. Безсумнівно, зовнішня привабливість важлива для створення якісних веб-сайтів, але навіщо потрібна бібліотека для загальних завдань, які використовують всі розробники?
виявлення функцій
Багато додатків, в яких використовується перетягування, не можуть без нього обходитися. Уявіть собі, що вам довелося б продумувати шахову партію, не маючи можливості переміщати фігури. Незважаючи на повну підтримку браузера, визначати, реалізовано чи в ньому перетягування (чи інша функція HTML5, що виконує ті ж завдання), потрібно для того, щоб забезпечити рішення, здатне якісно зменшувати потужність. Якщо функція перетягування недоступна, роботу програми можна реалізувати, підключивши бібліотеку.
Якщо вам необхідні можливості API, замість визначення параметра User-Agent браузера використовуйте виявлення функцій. Одна з кращих бібліотек для виявлення функцій називається Modernizr. Для кожної перевіряється функції Modernizr задає логічне значення. В результаті виходить дуже короткий код перевірки на наявність функції перетягування:
Створення перетягуваного змісту
Зробити об'єкт перетягувати дуже легко: для цього використовується атрибут draggable = true. Перетягування можна включати практично для будь-яких елементів, в т. Ч. Зображень, посилань, файлів і навіть вузлів DOM.
Як приклад почнемо з створення перегруппіруемих стовпців. Базова позначка може виглядати приблизно так:
Слід зазначити, що в більшості браузерів перетягування виділених фрагментів тексту, зображень та елементів прив'язок з атрибутом href підтримується за замовчуванням. Наприклад, при перетягуванні логотипу на веб-сайті google.com виникає фантомне зображення:
За допомогою CSS3 можна уявити розмітку у вигляді стовпців. З додаванням атрибуту cursor: move користувачі отримують візуальний індикатор рухливості елемента:
Результат (елементи можуть перетягувати, але нічого не роблять):
У наведеному вище прикладі більшість браузерів створюють фантомне зображення перетягуваного змісту. Інші (зокрема FF) в ході операції перетягування вимагають відправки даних. У наступному розділі ми зробимо приклад зі стовпцями більш цікавим, додавши прослуховувачі для обробки моделі подій перетягування.
Прослуховування подій перетягування
Для контролю над процесом перетягування можна використовувати цілий ряд подій:
1. Починайте перетягувати
Визначивши в змісті атрибути draggable = "true". додайте обробники подій dragstart. які будуть запускати послідовність перетягування для кожного стовпчика.
Як тільки користувач почне перетягувати стовпець, цей код зменшить його непрозорість до 40%:
Оскільки метою події dragstart є наш вихідний елемент, установка для атрибута this.style.opacity значення 40% дозволить користувачеві бачити переміщення обраного елемента. Нам залишилося тільки повернути 100-процентну непрозорість стовпців після перетягування. Для вирішення цього завдання використовується подія dragend. Детальніше ми розглянемо його пізніше.
2. dragenter, dragover і dragleave
Для створення додаткових візуальних підказок під час перетягування можна використовувати обробники подій dragenter. dragover і dragleave. Наприклад, якщо перетаскується виявляється на колонку, межа останнього стає пунктирною. Це покаже користувачам, що стовпці теж можуть бути метою перетягування.
У цьому коді варто відзначити кілька моментів.
3. Завершення перетягування
Наш приклад зі стовпцями не обійдеться без події drop. але спочатку необхідно дещо допрацювати, видаливши клас over з кожного стовпчика за допомогою події dragend:
Якщо ви ретельно стежили за тим, що відбувається, то помітили, що перетягування стовпців в нашому прикладі як і раніше не працює так, як потрібно. Введемо об'єкт DataTransfer.
об'єкт DataTransfer
Властивість DataTransfer - це те саме місце, де реалізується перетягування. Воно містить частину даних, що відправляються після виконання цієї дії. Об'єкт dataTransfer встановлюється в подію dragstart. а зчитується і обробляється в подію drop. При виконанні функції e.dataTransfer.setData (format, data) змістом об'єкта призначається MIME-тип, а корисні дані передаються в якості аргументів.
У нашому прикладі в якості корисних даних виступає фактичний HTML-код вихідного стовпця:
Зручно, що в об'єкта dataTransfer є також функція getData (format). що дозволяє доставляти перетягуються дані по MIME-типу. Ось як виглядає змінений процес перетягування стовпці:
Для зручності при переміщенні стовпців я додав глобальну змінну dragSrcEl. У функції handleDragStart () в ній зберігається елемент innerHTML вихідного стовпця. Згодом його зчитує функція handleDrop (). міняючи місцями HTML-код вихідного і цільового стовпців.
властивості перетягування
Об'єкт dataTransfer має властивості, які створюють візуальну підказку для користувачів в процесі перетягування. Їх також можна використовувати для управління реакцією кожної мети перетягування на певний тип даних.
Результат (при перетягуванні цих стовпців повинен відображатися логотип Google):
перетягування файлів
За допомогою API перетягування можна перетягувати файли з робочого столу в веб-додаток, відкрите у вікні браузера. Крім того, Google Chrome дозволяє перетягувати файлові об'єкти з вікна браузера на робочий стіл.
Перетягування з робочого столу в браузер
Перетягування файлу з робочого столу виконується за допомогою подій перетягування, як і для інших типів змісту. Основна відмінність полягає в обробнику події drop. Замість використання об'єкта dataTransfer.getData () для доступу до файлів дані містяться в властивість dataTransfer.files:
Перетягування з браузера на робочий стіл
Повне керівництво з перетягування файлів з браузера на робочий стіл приведено в статті Перетягування файлів як з Gmail на веб-сайті CSS Ninja.
Ось кінцевий варіант з поліпшеним зовнішнім виглядом і лічильником переміщень:
У цьому прикладі за допомогою стовпців цікаво те, що кожен з них є одночасно вихідним об'єктом і метою перетягування. Найчастіше вихідний і цільовий елементи розрізняються. Подивіться приклад: html5demos.com/drag.
висновок
Модель перетягування в HTML5 складніше, ніж в інших рішеннях, таких як інтерфейс JQuery. Однак якщо у вас є можливість задіяти вбудований API браузера, її потрібно використовувати. Зрештою, в цьому і полягає суть HTML5: стандартизувати і зробити доступним весь набір власних можливостей браузера. Сподіваємося, що з часом в популярні бібліотеки, в яких використовується функція перетягування, буде включена підтримка HTML5 за замовчуванням і можливість по-різному налаштовувати JS-рішення.
Enjoyed this article? Grab the RSS feed and stay up-to-date.
Except as otherwise noted. the content of this page is licensed under the Creative Commons Attribution 3.0 License. and code samples are licensed under the Apache 2.0 License.