Як використовувати API перетягування HTML

Реалізація функціоналу Drag and Drop на веб-сайтах

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

Основи технології Drag and Drop в HTML

Типова система перетягування складається з двох видів елементів: перший – це елементи, які можна переміщувати, зазвичай за допомогою миші, а другий – елементи, на які можна їх скидати, що вказують на місце розташування переміщуваного елемента.

Для активації перетягування необхідно повідомити браузеру, які саме елементи мають таку можливість. Щоб користувач міг перетягувати певний елемент, потрібно встановити для атрибута `draggable` цього елемента значення `true`, наприклад:

 <div draggable="true">Цей елемент можна перетягувати</div>

Під час початку процесу перетягування браузер автоматично генерує стандартне зображення “привида”, яке візуально підказує, який елемент зараз переміщується.

За бажанням, це стандартне зображення можна замінити на власне. Для цього потрібно вибрати елемент, який можна перетягувати з DOM, створити нове зображення для заміни, а також додати обробник подій `dragstart`, як показано нижче:

 let img = new Image();
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png";document.querySelector('div').addEventListener('dragstart', (event)=>{
    event.dataTransfer.setDragImage(img, 10, 10);
})

У наведеному коді, метод `setDragImage` приймає три параметри: посилання на зображення, а також горизонтальне та вертикальне зміщення зображення відповідно. Після запуску цього коду в браузері та початку перетягування елемента, ви побачите, що стандартне зображення замінено на власне.

Для активації можливості скидання елемента потрібно відмінити стандартну поведінку, запобігаючи подіям `dragenter` і `dragover`, як це показано нижче:

 const dropElement = document.querySelector("drop-target");dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

Інтерфейс DragEvent

В JavaScript існує інтерфейс `DragEvent`, який представляє собою взаємодію користувача з перетягуванням. Нижче перераховано можливі типи подій, які входять до цього інтерфейсу.

`drag`: ця подія ініціюється користувачем під час процесу перетягування елемента.
`dragend`: подія виникає, коли процес перетягування завершується або переривається користувачем (наприклад, відпускання кнопки миші або натискання клавіші Esc).
`dragenter`: ця подія спрацьовує, коли перетягуваний елемент потрапляє на ціль, де його можна скинути.
`dragleave`: подія виникає, коли перетягуваний елемент покидає цільову зону.
`dragover`: ця подія виникає, коли елемент перетягується над цільовою зоною.
`dragstart`: подія спрацьовує на початку операції перетягування.
`drop`: ця подія ініціюється користувачем під час скидання елемента на ціль.

Важливо зазначити, що під час перетягування файлу з зовнішнього джерела (наприклад, з файлового менеджера операційної системи) браузер не запускає події `dragstart` або `dragend`.

Інтерфейс `DragEvent` може стати у нагоді, якщо вам потрібно програмно ініціювати власні події перетягування. Наприклад, якщо ви хочете, щоб `div` викликав спеціальні події під час завантаження сторінки, ось як це можна зробити. Спочатку створіть новий власний `DragEvent()` наступним чином:

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})const customDragEndEvent = new DragEvent('dragend');

У наведеному прикладі `customDragStartEvent` представляє екземпляр `DragEvent()`. Він приймає два аргументи: тип події перетягування (один із семи, що були перелічені вище), а також об’єкт із ключем `dataTransfer`, що представляє екземпляр `DataTransfer` (детальніше про це далі). Далі потрібно отримати елемент з DOM, з якого ви хочете ініціювати подію:

 const draggableElement = document.querySelector("#draggable");

Після чого необхідно додати слухачі подій наступним чином:

   draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!'); 
  });  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

У першому обробнику подій реєструється повідомлення “Drag started!” і викликається метод `setData` у властивості `dataTransfer` об’єкта події. Тепер ви можете ініціювати власні події за допомогою:

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

Передача даних з використанням DataTransfer

Об’єкт `dataTransfer` виступає сполучною ланкою між вихідним елементом (який можна перетягувати) та цільовим елементом (зоною скидання) під час операції перетягування. Він служить тимчасовим сховищем для даних, якими ви хочете поділитися між цими елементами.

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

Використання setData() для передачі даних

Для передачі даних з елемента, який можна перетягувати, до елемента, на який можна скинути, використовується метод `setData()`, який надає об’єкт `dataTransfer`. Цей метод дозволяє запакувати дані, які потрібно передати, та вказати їх тип. Ось простий приклад:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Коли користувач починає перетягувати зазначений елемент, `setData()` запаковує текст “Hello, world!” із типом даних `text/plain`. Ці дані тепер пов’язані з подією перетягування та можуть бути доступні об’єкту, на який можна скидати, під час операції скидання.

Отримання даних з використанням getData()

На стороні приймання, в обробнику подій елемента, який можна скинути, ви можете отримати передані дані за допомогою методу `getData()`:

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Отримані дані: ${transferredData}`);
});

Цей код отримує дані з тим же типом (`text/plain`), який було встановлено за допомогою методу `setData()`. Це дозволяє отримати доступ та обробляти передані дані, залежно від потреб елемента, на який було скинуто.

Сфери застосування інтерфейсів Drag and Drop

Інтеграція можливості перетягування у ваші веб-застосунки може суттєво покращити користувацький досвід. Важливо розуміти, коли і чому слід використовувати цю функцію.

Завантаження файлів: надання можливості перетягувати файли безпосередньо зі свого комп’ютера або файлового менеджера в спеціальну область для завантаження, спрощує процес.
Списки з можливістю сортування: якщо ваш застосунок має списки елементів (завдання, списки відтворення, галереї зображень), користувачі оцінять можливість зміни їх порядку за допомогою перетягування.
Інтерактивні інформаційні панелі: в інструментах для візуалізації даних користувачі можуть налаштовувати свої інформаційні панелі, змінюючи порядок віджетів та діаграм.

Пам’ятайте про доступність

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