DragEvent в JavaScript — перетягування, dragover і drop
Загальний опис
DragEvent є набором подій, які JavaScript забезпечує для обробки дій перетягування елементів на сторінці. Вони дозволяють реалізувати інтерактивне переміщення елементів, взаємодію між ними та з іншими частинами сторінки. Основні події, що входять у набір "DragEvent", включають 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, запускається після завершення перетягування, незалежно від того, де відбулося скидання. Це зручно для скидання стилів або стану елементів.
- Порада
-
Щоб зберегти стильний вигляд під час перетягування, можна використовувати
автор: Bonddragenterтаdragleaveдля додавання/зняття спеціального класу стилю на елементі, що служить ціллю. Це забезпечить візуальне виділення елемента, коли над ним проходить перетягування. - Порада
-
Якщо ви перетягуєте текст між полями, замість
автор: Bondtext/plain, встановітьtext/htmlуDataTransfer, щоб зберігати стилі. Це особливо корисно для зберігання відформатованого тексту. - Порада
-
Щоб скинути стилі або візуальні ефекти після завершення перетягування, використовуйте
автор: Bonddragend. Наприклад, змінюючи стилі для скидання стану після перетягування, ви зможете надати користувачу більш зрозумілий і точний інтерфейс.
Синтаксис
element.addEventListener('dragstart', (event) => {
// код, що виконується під час початку перетягування
});
element.addEventListener('dragover', (event) => {
// код, що виконується під час перетягування над цільовим елементом
});
element.addEventListener('drop', (event) => {
// код, що виконується під час завершення перетягування
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 46 | 3.5 | 14 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 46 | 46 | 4 | 14 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє можливість сортування списку елементів за допомогою перетягування. Використовуючи dragstart і dragend, ми змінюємо стиль перетягуваного елемента, а в drop розміщуємо елемент у новій позиції, дозволяючи користувачу легко змінювати порядок елементів.
HTML
<div class="item">перший елемент item</div>
<div class="item">другий елемент item</div>JS
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, що може бути корисним для формування списків або вибору.
HTML
<div class="target">перший елемент target</div>
<div class="target">другий елемент target</div>JS
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;
}
});
});Цей приклад дозволяє користувачеві перетягувати завдання з початкового списку до завершених. Після того як завдання переміщене у "Завершено", воно залишається там. Користувач також може очистити завершені завдання натисканням кнопки "Очистити завершені".
HTML
<header>
<h2 class="title">Drag Events: Перетягування завдань</h2>
<p class="description">Демонстрація переміщення завдань між списками за допомогою Drag Events</p>
</header>
<main>
<div class="result">
<div class="tasks-container">
<h3>Завдання</h3>
<ul id="task-list">
<li class="task-item" draggable="true">Завдання 1</li>
<li class="task-item" draggable="true">Завдання 2</li>
<li class="task-item" draggable="true">Завдання 3</li>
</ul>
</div>
<div class="completed-container">
<h3>Завершено</h3>
<ul id="completed-list" class="drop-zone"></ul>
<button id="clear-completed">Очистити завершені</button>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
display: flex;
justify-content: space-around;
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.tasks-container, .completed-container {
width: 45%;
}
h3 {
text-align: center;
}
ul {
list-style: none;
padding: 0;
}
.task-item {
padding: 10px;
margin: 5px 0;
background-color: #e0e0e0;
cursor: grab;
border-radius: 4px;
}
.task-item.dragging {
opacity: 0.5;
}
.drop-zone {
min-height: 100px;
background-color: #f0f0f0;
border: 2px dashed #ccc;
border-radius: 4px;
padding: 10px;
}
button {
display: block;
margin: 10px auto;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}JS
document.querySelectorAll('.task-item').forEach(item => {
item.addEventListener('dragstart', event => {
event.target.classList.add('dragging');
event.dataTransfer.setData('text/plain', event.target.innerText);
});
item.addEventListener('dragend', event => {
event.target.classList.remove('dragging');
});
});
const completedList = document.getElementById('completed-list');
completedList.addEventListener('dragover', event => {
event.preventDefault();
});
completedList.addEventListener('drop', event => {
event.preventDefault();
const taskText = event.dataTransfer.getData('text/plain');
if (taskText) {
const newItem = document.createElement('li');
newItem.innerText = taskText;
newItem.classList.add('task-item');
completedList.appendChild(newItem);
}
});
document.getElementById('clear-completed').addEventListener('click', () => {
completedList.innerHTML = '';
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!