API HTML5 для перетягування (DnD) означає, що майже будь-який елемент на сторінці може стати перетягуваним. У цій статті ми розглянемо основи перетягування і перетягування.
Створюйте перетягуваний контент
Варто зазначити, що в більшості браузерів текстові вибори, зображення та посилання за замовчуванням можна перетягувати. Наприклад, якщо перетягнути логотип Google у пошук Google, ви побачите примарне зображення. Зображення потім можна перетягнути і вставити в адресний рядок <input type="file" /> елемент або навіть на робочий стіл. Щоб зробити інші типи контенту перетягуваними, потрібно використовувати HTML5 DnD API.
Щоб зробити об'єкт перетягуваним, встановіть елементdraggable=true。 Перетягування підтримується майже для будь-якого елемента, включно з зображеннями, файлами, посиланнями, файлами або будь-якою розміткою на сторінці.
У нашому прикладі ми створимо інтерфейс для перестановки деяких стовпців, які були розміщені через CSS Grid. Базова розмітка для цих стовпців наведена нижче, при цьому властивість перетягування встановлена як true для кожного стовпця.
Ось CSS для моїх контейнерних і коробкових елементів. Зверніть увагу, що єдина CSS, пов'язана з функціоналом DnD, — це властивість курсора: move. Решта коду контролює лише розташування та стиль елементів контейнера та коробки.
На цьому етапі ви побачите, що можна перетягнути предмет, але більше нічого не станеться. Щоб додати функціональність DnD, потрібно використовувати JavaScript API.
Слухайте драг-події
Для моніторингу всього процесу перетягування можна залучати багато різних подій.
- Dragstart
- перетягувати
- Драгентер
- Dragleave
- Драговер
- крапля
- Драгенд
Для обробки потоку DnD потрібен якийсь вихідний елемент (початкова точка перетягування), корисне навантаження даних (те, що ви намагаєтеся розмістити) і ціль (область, де розміщено снап). Вихідними елементами можуть бути зображення, списки, посилання, об'єкти файлів, HTML-блоки тощо. Мета — прийняти зону дропу (або набір зон скидання) даних, які користувач намагається розмістити. Майте на увазі, що не всі елементи можуть бути цілями, наприклад, зображення не можуть бути цілями.
Початок і завершення послідовності перетягування
Після визначення властивості draggable="true" у вмісті прикріпіть обробник подій перетягування, щоб запустити послідовність DnD для кожного стовпця.
Цей код встановлює прозорість стовпця на рівні 40% при початку перетягування, а потім повертає її до 100% наприкінці події перетягування.
Результати можна побачити у демо Glitch нижче. Перетягніть предмет — і він стане непрозорим. Оскільки подія перетягування націлюється на вихідний елемент, встановлення this.style.opacity на 40% дає користувачу візуальний зворотний зв'язок, що вибраний елемент рухається. Після розміщення елемента джерело повертається до 100% прозорості, хоча функція розміщення ще не записана.
Використовуйте dragenter, dragover і dragleave, щоб додати додаткові візуальні підказки
Щоб допомогти користувачам зрозуміти, як взаємодіяти з вашим інтерфейсом, використовуйте обробники подій dragenter, dragover і dragleave. У наступному прикладі стовпці можна перетягувати або націлювати. Щоб допомогти користувачам це зрозуміти, коли користувач перетягує елемент повз колонку, межа цього стовпця стає пунктирною лінією. Наприклад, у CSS можна створити клас over, який представляє елемент, який є цільовою для розміщення:
Потім налаштуйте обробник подій у JavaScript, який додасть клас over при перетягуванні стовпця і видаляє його при виході. У обробці драгендів ми також хочемо переконатися, що клас видаляється наприкінці драгу.
У цьому коді варто згадати кілька моментів:
Під час перетягування елемента, наприклад посилання, потрібно заблокувати стандартну поведінку браузера — навігацію до цього посилання. Для цього викликайте e.preventDefault() у події перетягування. Ще одна хороша практика — повертати false у тому ж обробнику.
Використовуйте обробник подій dragenter для перемикання класів, а не dragover. Якщо ви використовуєте перетягування, клас CSS перемикається кілька разів, оскільки подія постійно активується, коли стовпець зависає. Зрештою, це призведе до того, що рендерер браузера виконує багато зайвої роботи. Найкраще завжди мінімізувати перемальовування. Якщо вам з якоїсь причини потрібно використовувати події dragover, розгляньте можливість обмеження або видалення слухачів подій.
Завершити розміщення
Щоб впоратися з фактичним розміщенням, додайте слухача події для дроп-івенту. У дроп-обробнику потрібно заблокувати стандартну поведінку браузера щодо розміщення, що зазвичай є якимось дратівливим перенаправленням. e.stopPropagation() можна викликати, щоб запобігти активації DOM подією.
Обов'язково зареєструйте нового хендлера в іншому хендлері:
Якщо ви запустите код у цей момент, проєкт не буде розміщений у новому місці. Для цього потрібно використовувати об'єкт DataTransfer.
Властивість dataTransfer — це місце, де відбуваються всі дива DnD. Він зберігає фрагменти даних, надіслані під час операції перетягування. dataTransfer встановлюється у події перетягування і читається/обробляється у події drop. Викликайте e.dataTransfer.setData(mimeType, dataPayload) для встановлення типу MIME та корисного навантаження даних об'єкта.
У наступному прикладі ми дозволимо користувачам змінювати порядок стовпців. Для цього спочатку потрібно зберегти HTML вихідного елемента на початку перетягування:
Обробіть розміщення стовпців у події drop, встановіть HTML вихідного стовпця на HTML цільового стовпця, де він розміщений, спочатку перевірте, чи цільовий стовпець, який перетягнув і скинув користувач, збігається з стовпцем джерела.
Більше властивостей опору
Об'єкт dataTransfer відкриває властивості, які використовуються для візуального зворотного зв'язку користувачу під час процесу перетягування. Ці властивості також можна використовувати для контролю, як кожна ціль розміщення реагує на певні типи даних.
- dataTransfer.effectAllowed обмежує «тип перетягування», який користувач може виконувати над елементом. Він використовується в моделі обробки перетягування та перетягування для ініціалізації dropEffect під час подій перетягування та перетягування. Цю властивість можна встановити на такі значення: none, copy, copyLink, copyMove, link, linkMove, move, all та uninitialized.
- dataTransfer.dropEffect контролює зворотний зв'язок, який надається користувачу під час подій перетягування та перетягування. Коли користувач наводить курсор на цільовий елемент, курсор браузера вказує тип дії, яку потрібно виконати (наприклад, копіювання, переміщення тощо). Ефект може бути одним із наступних значень: none, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) вказує, що стандартний зворотний зв'язок «ghost image» браузера не використовується, а натомість є опція встановлення іконки перетягування.
Завантажуйте файли шляхом перетягування
Наступний простий приклад використовує стовпець як джерело перетягування та ціль перетягування. Це можна побачити в інтерфейсі, коли користувача просять переставити елементи. У деяких випадках перетягування цілі та джерела можуть відрізнятися, наприклад, у інтерфейсі, де користувач має обрати зображення як основне зображення продукту, перетягнувши вибране зображення на ціль.
Drag and drop часто використовують для того, щоб користувачі могли перетягувати елементи з робочого столу в додаток. Головна відмінність — це дроп-хендлер. Без використання dataTransfer.getData() для доступу до файлу дані файлу будуть включені до властивості dataTransfer.files:
Оригінальне посилання:Вхід за гіперпосиланням видно.
|
Опубліковано 2022-4-26 10:30:50
|
|
|
|
Опубліковано 2022-4-26 21:27:25
|
