JS об'єкт Drag
Загальний опис
Drag Events є набором подій, які JavaScript забезпечує для обробки дій перетягування елементів на сторінці. Вони дозволяють реалізувати інтерактивне переміщення елементів, взаємодію між ними та з іншими частинами сторінки. Основні події, що входять у набір "Drag Events", включають dragstart, drag, dragenter, dragover, dragleave, drop та dragend. Кожна з них призначена для відстеження конкретних моментів у процесі перетягування.
Подія dragstart виникає, коли користувач починає перетягувати елемент, і є стартовою точкою в процесі перетягування. У цьому випадку зазвичай додають дані до об’єкта DataTransfer, щоб визначити, які саме дані будуть перенесені, або змінюють стиль елемента.
element.addEventListener('dragstart', (event) => {
event.dataTransfer.setData('text/plain', event.target.id);
});
Події drag і dragover викликаються під час самого перетягування. dragover є важливою подією, оскільки за замовчуванням елементи не допускають подію drop, і для активації можливості "скидання" необхідно викликати event.preventDefault() у dragover.
element.addEventListener('dragover', (event) => {
event.preventDefault(); // дозволяє скидання
});
Події dragenter та dragleave допомагають відслідковувати момент, коли елемент входить в область іншого елемента або покидає її. Їх можна використовувати для зміни стилю елемента, над яким проходить перетягування, що додає інтерактивності.
Остання фаза перетягування — drop, де відбувається "скидання" елемента, тобто його розміщення на цільовому місці. Використовуючи drop, можна отримати дані, які були встановлені у dragstart, і провести подальшу обробку.
element.addEventListener('drop', (event) => {
event.preventDefault();
const data = event.dataTransfer.getData('text/plain');
console.log(`Отримані дані: ${data}`);
});
Заключна подія, dragend, запускається після завершення перетягування, незалежно від того, де відбулося скидання. Це зручно для скидання стилів або стану елементів.
| Порада: | Якщо ви перетягуєте текст між полями, замість |
| Порада: | Щоб скинути стилі або візуальні ефекти після завершення перетягування, використовуйте |
| Порада: | Щоб зберегти стильний вигляд під час перетягування, можна використовувати |
Синтаксис
element.addEventListener('dragstart', (event) => {
// код, що виконується під час початку перетягування
});
element.addEventListener('dragover', (event) => {
// код, що виконується під час перетягування над цільовим елементом
});
element.addEventListener('drop', (event) => {
// код, що виконується під час завершення перетягування
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
46 |
3.5 |
14 |
12 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
46 |
46 |
4 |
14 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачеві перетягувати завдання з початкового списку до завершених. Після того як завдання переміщене у "Завершено", воно залишається там. Користувач також може очистити завершені завдання натисканням кнопки "Очистити завершені".
Цей приклад демонструє можливість сортування списку елементів за допомогою перетягування. Використовуючи dragstart і dragend, ми змінюємо стиль перетягуваного елемента, а в drop розміщуємо елемент у новій позиції, дозволяючи користувачу легко змінювати порядок елементів.
let draggedItem = null;
document.querySelectorAll('.item').forEach((item) => {
item.addEventListener('dragstart', (event) => {
draggedItem = event.target;
event.target.style.opacity = 0.5;
});
item.addEventListener('dragend', (event) => {
event.target.style.opacity = '';
draggedItem = null;
});
item.addEventListener('dragover', (event) => {
event.preventDefault();
});
item.addEventListener('drop', (event) => {
event.preventDefault();
if (draggedItem && draggedItem !== event.target) {
event.target.parentNode.insertBefore(draggedItem, event.target.nextSibling);
}
});
});У цьому прикладі ми переносимо текстовий вміст елемента з одного списку в інший. Код дозволяє користувачу перетягувати дані з .source в .target, що може бути корисним для формування списків або вибору.
let draggedData = null;
document.querySelectorAll('.source .item').forEach((item) => {
item.addEventListener('dragstart', (event) => {
draggedData = event.target.innerText;
event.target.style.backgroundColor = 'gray';
});
item.addEventListener('dragend', (event) => {
event.target.style.backgroundColor = '';
});
});
document.querySelectorAll('.target').forEach((target) => {
target.addEventListener('dragover', (event) => {
event.preventDefault();
});
target.addEventListener('drop', (event) => {
event.preventDefault();
if (draggedData) {
event.target.innerText += draggedData;
draggedData = null;
}
});
});