Назад Вперед Зміст

Drag and Drop API

Це вбудований інтерфейс програмування програм (API) у веб-браузерах, який дозволяє розробникам створювати інтерфейси, які підтримують перетягування елементів. Цей API робить процес реалізації перетягування та скидання об'єктів більш простим та стандартизованим, що спрощує створення інтерактивних елементів на веб-сторінці.

Основні концепції Drag and Drop API

1. Перетягуються елементи: Щоб елемент можна було перетягувати, йому потрібно додати атрибут draggable="true". Це робить елемент доступним для перетягування.
2. Об'єкт DataTransfer: Це об'єкт, який використовується для зберігання даних, що переносяться під час перетягування. Він дозволяє розробникам задати дані, які можна буде отримати в момент скидання, використовуючи методи setData() та getData().

Основні події Drag and Drop API

1. dragstart: подія, яка спрацьовує, коли починається перетягування елемента. Використовується для вказівки на те, що елемент почав переміщатися.
2. drag: спрацьовує у процесі перетягування елемента.
3. dragend: викликається, коли перетягування елемента завершено (навіть якщо його скасовано).
4. dragenter: виникає, коли елемент, що перетягується, входить у межі іншого елемента (зони скидання).
5. dragover: викликається, коли елемент перетягується над зоною скидання. Необхідно викликати метод event.preventDefault(), щоб дозволити скидання.
6. dragleave: викликається, коли елемент, що перетягується, залишає зону скидання.
7. drop: викликається, коли елемент, що перетягується, скинутий в зону скидання.

Приклад використання Drag and Drop API

Основна структура коду

Для елемента, що переміщається, обов'язково додайте атрибут draggable зі значенням true. Це дозволить йому працювати з drag and drop API.

draggable="true": атрибут, який робить елемент, що перетягується.

event.dataTransfer: об'єкт, який зберігає дані, що передаються під час перетягування.

МетодsetData задає дані, а getData їх витягує.

event.preventDefault(): метод, який запобігає стандартній поведінці браузера (наприклад, відкриття файлу під час перетягування) і дозволяє скидання елемента.

Покращення коду

CSS класи:

1. .hlight: використовується для підсвічування зони скидання при вході елемента, що перетягується.
2. .hover: додає тимчасовий стиль для підтвердження скидання.

Зміна стилю елемента, що перетягується:

1. Елемент стає прозорим на початку перетягування (opacity: 0.5), щоб показати користувачеві, що він переміщається.
2. Відновлюється у нормальний стан (opacity: 1) після завершення перетягування.
3. Переходи:Плавний перехід для зміни фону зони скидання зроблено transition.

Повертаємо текст на місце

Щоб повернути об'єкт назад у вихідне місце при скиданні в невідповідне місце або після успішного скидання, можна додати початкову позицію для елемента, що перетягується, і повертати його, якщо скидання сталося поза зоною. Для цього потрібно використовувати додаткову логіку у подіях dragend та drop. Елемент повертається на вихідне місце:

В обробнику dragend перевіряється, де знаходиться елемент після завершення перетягування. Якщо вона не знаходиться в зоні скидання (dropzone), то елемент повертається у вихідний контейнер (origin).

Збереження вихідної позиції:

Використовується змінна початкова позиція, щоб запам'ятати вихідне батьківське положення елемента.

Приклад із поверненням елемента

Відстежуватимемо, чи був елемент успішно скинутий у зону. Якщо ні, елемент буде повернено у вихідне місце.

Прапор droppedInZone:

Цей прапор використовується для відстеження , чи елемент скинутий у зону. Він скидається в false на початку перетягування і встановлюється в true при успішному скиданні в зону.

Обробник dragend :

Перевіряє значення, що викинуто взоні. Якщо елемент не був скинутий у зону (прапор дорівнює false), елемент повертається у контейнер origin.