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 є критично важливою для будь-якої реалізації механізмів перетягування та скидання, оскільки вона дозволяє розробникам визначити початковий стан перетягування і встановити потрібні дані для передачі. Це надає велику гнучкість в управлінні поведінкою користувацького інтерфейсу під час перетягування.
- Порада
-
Змінюйте стиль або клас перетягуваного елемента в обробнику події
автор: Bonddragstart, щоб дати користувачам візуальні підказки. Наприклад, ви можете змінити прозорість або застосувати новий клас стилю для покращення взаємодії з користувачем. - Порада
-
Завжди додавайте обробники для інших подій перетягування, таких як
автор: Bonddragend,dragoverіdrop, щоб мати повний контроль над операцією перетягування. Це дозволить вам налаштувати і відстежувати весь процес від початку до кінця. - Порада
-
Переконайтеся, що ви враховуєте можливість помилок або скасування операцій перетягування користувачем. Обробляйте події
автор: Bonddragendдля скидання стилів або скасування змін, зроблених під часdragstart.
Синтаксис
element.addEventListener('dragstart', function(event) {
// Ваш код тут
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 9 | 3.1 | 12 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 9 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі реалізовано перетягування кількох елементів списку. Кожен елемент має встановлені дані для передачі при перетягуванні, які дорівнюють його текстовому вмісту. Стиль елемента змінюється на початку перетягування і скидається після його завершення.
HTML
<div class="draggable-item">перший елемент draggable-item</div>
<div class="draggable-item">другий елемент draggable-item</div>JS
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 встановлює кастомне зображення курсора під час перетягування. Це забезпечує інтуїтивну взаємодію з користувачем, надаючи йому візуальні підказки про те, що відбувається під час перетягування.
HTML
<img id="draggableImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<div id="customCursor">Демонстраційний елемент</div>JS
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('Перетягування зображення завершено.');
});Користувач може перетягувати кольорові блоки з позначенням кольору на тексті. Подія dragstart задає колір блоку у dataTransfer, щоб потім отримати його під час drop. Це дозволяє точно передати інформацію про те, який саме елемент було перенесено, і відобразити повідомлення про успішну дію.
HTML
<header>
<h2 class="title">Event - dragstart</h2>
<p class="description">Активується при початку перетягування елемента, дозволяючи задати переносимі дані.</p>
</header>
<main>
<div class="result">
<!-- Блоки, які можна перетягувати -->
<div class="draggable-container">
<div class="draggable" draggable="true" data-color="red">Червоний</div>
<div class="draggable" draggable="true" data-color="blue">Синій</div>
<div class="draggable" draggable="true" data-color="green">Зелений</div>
</div>
<!-- Зона призначення -->
<div class="drop-zone">Перетягніть елементи сюди</div>
<p id="drop-message"></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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 {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.draggable-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.draggable {
padding: 10px;
background-color: #ddd;
border: 1px solid #999;
cursor: movJS
const draggables = document.querySelectorAll('.draggable');
const dropZone = document.querySelector('.drop-zone');
const dropMessage = document.getElementById('drop-message');
// Додаємо подію dragstart для кожного елемента
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', event => {
event.dataTransfer.setData('text/plain', event.target.dataset.color);
event.target.classList.add('dragging');
});
});
// Слухаємо події dragover та drop на зоні призначення
dropZone.addEventListener('dragover', event => {
event.preventDefault(); // Дозволяємо перетягування в зону
dropZone.classList.add('highlight');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('highlight');
});
dropZone.addEventListener('drop', event => {
event.preventDefault();
const color = event.dataTransfer.getData('text/plain'); // Отримуємо дані з dragstart
dropZone.classList.remove('highlight');
dropMessage.textContent = `Ви перенесли ${color} елемент!`;
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!