Перетягування — це важлива функція, яка покращує взаємодію з користувачем і забезпечує безперебійну роботу користувача. Незалежно від того, чи хочете ви створити засіб завантаження файлів, список із можливістю сортування чи інтерактивну гру, розуміння того, як використовувати можливості цього API, є важливим навиком у вашому інструментарії веб-розробки.
Основи перетягування в HTML
У типовій системі перетягування існує два типи елементів: перший тип включає елементи, які можна перетягувати, які користувачі можуть переміщувати за допомогою миші, а другий тип включає елементи, які можна скидати, які зазвичай вказують, де користувачі можуть розмістити елемент.
Щоб застосувати перетягування, ви повинні повідомити браузеру, які елементи ви хочете перетягувати. Щоб користувач міг перетягувати елемент, для атрибута HTML, який можна перетягувати, для цього елемента має бути встановлено значення true, наприклад:
<div draggable="true">This element is draggable</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, який представляє взаємодію користувача за допомогою перетягування. Нижче наведено список можливих типів подій в інтерфейсі DragEvent.
- drag: користувач запускає цю подію під час перетягування елемента.
- dragend: ця подія запускається, коли операція перетягування закінчується або коли користувач перериває її. Типову операцію перетягування можна завершити, відпустивши кнопку миші або натиснувши клавішу виходу.
- 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(). У customDragStartEvent є два аргументи конструктора. Перший представляє тип події перетягування, який може бути одним із семи типів подій, згаданих раніше.
Другим аргументом є об’єкт із ключем 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!');
});
У першому прослухувачі подій вище функція зворотного виклику реєструє текст «Перетягування розпочато!» і викликає метод 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(`Received data: ${transferredData}`);
});
Наведений вище блок коду отримує дані з тим самим типом даних (текст/звичайний), який було встановлено за допомогою методу setData() раніше. Це дозволяє вам отримувати доступ і маніпулювати переданими даними за потреби в контексті елемента, який можна відкинути.
Випадки використання для інтерфейсів перетягування
Інтеграція функції перетягування та скидання у ваші веб-програми може бути потужним вдосконаленням, але важливо розуміти, коли і чому ви повинні її застосовувати.
- Завантажувачі файлів: дозволяючи користувачам перетягувати файли безпосередньо зі свого робочого столу або файлового менеджера в призначену область для відвантаження, спрощується процес завантаження.
- Сортовані списки: якщо ваша програма містить списки елементів, наприклад списки завдань, списки відтворення або галереї зображень, користувачі можуть оцінити можливість змінювати порядок елементів за допомогою перетягування.
- Інтерактивні інформаційні панелі: для інструментів візуалізації даних і створення звітів перетягування може бути потужним способом для користувачів налаштувати свої інформаційні панелі шляхом зміни порядку розташування віджетів і діаграм.
Пам’ятайте про доступність
Хоча перетягування може бути візуально привабливим і покращувати взаємодію з користувачем, дуже важливо переконатися, що ваша реалізація залишається доступною для всіх користувачів, у тому числі для людей з обмеженими можливостями. Надайте альтернативні методи взаємодії, наприклад керування з клавіатури, щоб зробити вашу програму інклюзивною.
