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 є критично важливою для будь-якої реалізації механізмів перетягування та скидання, оскільки вона дозволяє розробникам визначити початковий стан перетягування і встановити потрібні дані для передачі. Це надає велику гнучкість в управлінні поведінкою користувацького інтерфейсу під час перетягування.

правити

Порада

Змінюйте стиль або клас перетягуваного елемента в обробнику події dragstart, щоб дати користувачам візуальні підказки. Наприклад, ви можете змінити прозорість або застосувати новий клас стилю для покращення взаємодії з користувачем.

автор: Bond правити

Порада

Завжди додавайте обробники для інших подій перетягування, таких як dragend, dragover і drop, щоб мати повний контроль над операцією перетягування. Це дозволить вам налаштувати і відстежувати весь процес від початку до кінця.

автор: Bond правити

Порада

Переконайтеся, що ви враховуєте можливість помилок або скасування операцій перетягування користувачем. Обробляйте події dragend для скидання стилів або скасування змін, зроблених під час dragstart.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('dragstart', function(event) {
  // Ваш код тут
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="draggable-item">перший елемент draggable-item</div>
<div class="draggable-item">другий елемент draggable-item</div>

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('Перетягування завершено.');
  });
});

<img id="draggableImage" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<div id="customCursor">Демонстраційний елемент</div>

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('Перетягування зображення завершено.');
});