JS властивість Event.drag

Загальний опис

drag — це подія, яка виникає при перетягуванні елемента користувачем. Вона є частиною API перетягування (Drag and Drop API) і спрацьовує, коли користувач починає переміщати елемент, утримуючи його мишею. Подія drag дозволяє відстежувати позицію миші під час перетягування і застосовувати різні ефекти або дії до елемента або інтерфейсу. Вона є важливою для створення інтерактивних веб-додатків, де користувачі можуть перетягувати елементи, наприклад, для організації списків, створення діаграм, завантаження файлів або управління інтерфейсами.

Щоб використовувати подію drag, необхідно додати атрибут draggable="true" до HTML-елемента, який повинен бути перетягуваним, і додати обробник подій до цього елемента. Наприклад:

const draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('drag', function(event) {
  console.log(`Елемент перетягується: координати (${event.clientX}, ${event.clientY})`);
});

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

Подія drag працює разом з іншими подіями API перетягування, такими як dragstart, dragover, dragleave, drop і dragend. Наприклад, dragstart спрацьовує на початку перетягування, dragover — коли елемент переміщується над допустимою областю для скидання, а drop — коли елемент скидається на цільовий елемент. Разом ці події дозволяють створювати повнофункціональні механізми перетягування та скидання в веб-додатках.

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

правити

Порада

Для роботи з подією drag завжди додавайте атрибут draggable="true" до елементів, які повинні бути перетягуваними. Це дозволяє браузеру розуміти, що елемент підтримує перетягування, і активує відповідні події.

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

Порада

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

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

Порада

Переконайтеся, що ви правильно налаштували обробники подій для подій dragover і drop, щоб уникнути непередбачених поведінок, наприклад, коли елемент не може бути скинутий в потрібну область. Ви можете використовувати методи event.preventDefault() і event.stopPropagation(), щоб керувати поведінкою перетягування.

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	1	9	3.1	12	12	9

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

Переглядач
	4.4	18	9	2

Приклади

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

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

const draggableImage = document.getElementById('draggableImage');
const dropArea = document.getElementById('dropArea');

draggableImage.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
  console.log('Почалося перетягування зображення.');
});

dropArea.addEventListener('dragover', function(event) {
  event.preventDefault();
  dropArea.style.backgroundColor = '#e0e0e0'; // Підсвічуємо область
  console.log('Зображення перетягується над областю.');
});

dropArea.addEventListener('dragleave', function() {
  dropArea.style.backgroundColor = ''; // Прибираємо підсвічування
});

dropArea.addEventListener('drop', function(event) {
  event.preventDefault();
  const imageId = event.dataTransfer.getData('text/plain');
  const imageElement = document.getElementById(imageId);
  dropArea.appendChild(imageElement);
  dropArea.style.backgroundColor = ''; // Відновлюємо фон
  console.log('Зображення успішно скинуто в область.');
});

<div id="draggableText">Демонстраційний елемент</div>
<div id="dropZone">Демонстраційний елемент</div>

const draggableText = document.getElementById('draggableText');
const dropZone = document.getElementById('dropZone');

draggableText.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.textContent);
  console.log('Почалося перетягування тексту.');
});

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
  dropZone.style.border = '2px dashed #007bff';
});

dropZone.addEventListener('dragleave', function() {
  dropZone.style.border = '2px solid #ccc';
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  const droppedText = event.dataTransfer.getData('text/plain');
  const newParagraph = document.createElement('p');
  newParagraph.textContent = droppedText;
  dropZone.appendChild(newParagraph);
  dropZone.style.border = '2px solid #ccc';
  console.log('Текст успішно додано до нової області.');
});