JS властивість Event.dragstart
Загальний опис
dragstart — це подія, яка спрацьовує, коли користувач починає перетягувати елемент. Ця подія є частиною Drag and Drop API і дозволяє розробникам встановлювати дані, які будуть передані під час операції перетягування. Подія dragstart може бути використана для зміни стилю елемента, який перетягується, або для встановлення певних даних, які будуть передані до зони скидання.
Щоб використовувати подію dragstart, елемент повинен мати атрибут draggable="true". Це дозволяє браузеру знати, що елемент може бути перетягнутий. В обробнику події dragstart часто використовується метод event.dataTransfer.setData(format, data), який дозволяє встановити формат і дані, які будуть передані під час скидання елемента. Наприклад:
const draggableItem = document.getElementById('draggableItem');
draggableItem.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'Це перетягуваний текст');
event.target.style.opacity = '0.5';
console.log('Перетягування розпочато.');
});
У цьому прикладі, коли користувач починає перетягувати елемент з ідентифікатором draggableItem, встановлюються дані типу text/plain, а також змінюється прозорість елемента, щоб дати користувачу візуальну підказку про те, що елемент перетягується. Крім того, в консоль буде виведено повідомлення "Перетягування розпочато".
Подія dragstart є критично важливою для будь-якої реалізації механізмів перетягування та скидання, оскільки вона дозволяє розробникам визначити початковий стан перетягування і встановити потрібні дані для передачі. Це надає велику гнучкість в управлінні поведінкою користувацького інтерфейсу під час перетягування.
| Порада: | Змінюйте стиль або клас перетягуваного елемента в обробнику події |
| Порада: | Завжди додавайте обробники для інших подій перетягування, таких як |
| Порада: | Переконайтеся, що ви враховуєте можливість помилок або скасування операцій перетягування користувачем. Обробляйте події |
Синтаксис
element.addEventListener('dragstart', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Користувач може перетягувати кольорові блоки з позначенням кольору на тексті. Подія dragstart задає колір блоку у dataTransfer, щоб потім отримати його під час drop. Це дозволяє точно передати інформацію про те, який саме елемент було перенесено, і відобразити повідомлення про успішну дію.
У цьому прикладі реалізовано перетягування кількох елементів списку. Кожен елемент має встановлені дані для передачі при перетягуванні, які дорівнюють його текстовому вмісту. Стиль елемента змінюється на початку перетягування і скидається після його завершення.
const listItems = document.querySelectorAll('.draggable-item');
listItems.forEach(item => {
item.addEventListener('dragstart', function(event) {
const data = event.target.textContent;
event.dataTransfer.setData('text/plain', data);
event.target.style.backgroundColor = '#e0e0e0';
console.log(`Перетягування розпочато для: ${data}`);
});
item.addEventListener('dragend', function(event) {
event.target.style.backgroundColor = '';
console.log('Перетягування завершено.');
});
});У цьому прикладі, коли користувач починає перетягувати зображення, подія dragstart встановлює кастомне зображення курсора під час перетягування. Це забезпечує інтуїтивну взаємодію з користувачем, надаючи йому візуальні підказки про те, що відбувається під час перетягування.
const draggableImage = document.getElementById('draggableImage');
draggableImage.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', 'Перетягуване зображення');
event.dataTransfer.setDragImage(document.getElementById('customCursor'), 10, 10);
console.log('Перетягування зображення розпочато.');
});
draggableImage.addEventListener('dragend', function(event) {
console.log('Перетягування зображення завершено.');
});