JS властивість Event.drag
Загальний опис
drag — це подія, яка виникає при перетягуванні елемента користувачем. Вона є частиною API перетягування (Drag and Drop API) і спрацьовує, коли користувач починає переміщати елемент, утримуючи його мишею. Подія drag дозволяє відстежувати позицію миші під час перетягування і застосовувати різні ефекти або дії до елемента або інтерфейсу. Вона є важливою для створення інтерактивних веб-додатків, де користувачі можуть перетягувати елементи, наприклад, для організації списків, створення діаграм, завантаження файлів або управління інтерфейсами.
Щоб використовувати подію drag, необхідно додати атрибут draggable="true" до HTML-елемента, який повинен бути перетягуваним, і додати обробник подій до цього елемента. Наприклад:
const draggableElement = document.getElementById('draggable');
draggableElement.addEventListener('drag', function(event) {
console.log(`Елемент перетягується: координати (${event.clientX}, ${event.clientY})`);
});
У цьому прикладі елемент з ідентифікатором draggable стає перетягуваним, і кожного разу, коли користувач переміщує його мишею, в консоль виводяться поточні координати миші. Це дозволяє розробникам створювати інтерактивні компоненти, які реагують на перетягування.
Подія drag працює разом з іншими подіями API перетягування, такими як dragstart, dragover, dragleave, drop і dragend. Наприклад, dragstart спрацьовує на початку перетягування, dragover — коли елемент переміщується над допустимою областю для скидання, а drop — коли елемент скидається на цільовий елемент. Разом ці події дозволяють створювати повнофункціональні механізми перетягування та скидання в веб-додатках.
Подія drag часто використовується для реалізації складних інтерфейсів користувача, таких як редактори вмісту, системи управління завданнями, інтерактивні інструменти для проектування, або в іграх, де об'єкти можуть бути перетягнуті та розміщені в різних місцях.
| Порада: | Переконайтеся, що ви правильно налаштували обробники подій для подій |
| Порада: | Для роботи з подією |
| Порада: | При реалізації перетягування завжди враховуйте доступність. Переконайтеся, що ваші елементи можна перетягувати не тільки за допомогою миші, але й з клавіатури або інших пристроїв введення, якщо це можливо. |
Синтаксис
element.addEventListener('drag', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може перетягувати завдання між різними секціями ("Завдання", "В процесі", "Виконано"), що дозволяє динамічно керувати списком задач. При перетягуванні завдань змінюється колір фону, що полегшує візуальне сприйняття процесу перетягування. Кнопка "Очистити" видаляє всі завдання з розділу "Виконано", що дозволяє легко керувати завданнями, які вже завершено. Це забезпечує інтуїтивно зрозумілий і інтерактивний досвід для користувача.
У цьому прикладі користувач може перетягнути зображення з однієї частини сторінки до іншої. Подія dragstart починає процес перетягування, dragover і dragleave підсвічують область для перетягування, а drop завершують процес, додаючи зображення до нової області. Це зручно для створення динамічних інтерфейсів з підтримкою перетягування.
const draggableImage = document.getElementById('draggableImage');
const dropArea = document.getElementById('dropArea');
draggableImage.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
console.log('Почалося перетягування зображення.');
});
dropArea.addEventListener('dragover', function(event) {
event.preventDefault();
dropArea.style.backgroundColor = '#e0e0e0'; // Підсвічуємо область
console.log('Зображення перетягується над областю.');
});
dropArea.addEventListener('dragleave', function() {
dropArea.style.backgroundColor = ''; // Прибираємо підсвічування
});
dropArea.addEventListener('drop', function(event) {
event.preventDefault();
const imageId = event.dataTransfer.getData('text/plain');
const imageElement = document.getElementById(imageId);
dropArea.appendChild(imageElement);
dropArea.style.backgroundColor = ''; // Відновлюємо фон
console.log('Зображення успішно скинуто в область.');
});Цей приклад дозволяє користувачеві перетягувати текст із одного елемента та створювати новий елемент у цільовій області при скиданні. Події dragstart, dragover, dragleave, і drop дозволяють користувачу інтуїтивно взаємодіяти з елементами, створюючи новий контент на сторінці, що робить інтерфейс динамічним і інтерактивним.
const draggableText = document.getElementById('draggableText');
const dropZone = document.getElementById('dropZone');
draggableText.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', event.target.textContent);
console.log('Почалося перетягування тексту.');
});
dropZone.addEventListener('dragover', function(event) {
event.preventDefault();
dropZone.style.border = '2px dashed #007bff';
});
dropZone.addEventListener('dragleave', function() {
dropZone.style.border = '2px solid #ccc';
});
dropZone.addEventListener('drop', function(event) {
event.preventDefault();
const droppedText = event.dataTransfer.getData('text/plain');
const newParagraph = document.createElement('p');
newParagraph.textContent = droppedText;
dropZone.appendChild(newParagraph);
dropZone.style.border = '2px solid #ccc';
console.log('Текст успішно додано до нової області.');
});