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

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

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

Для використання події dragend розробник повинен додати обробник подій до елемента, який має бути перетягуваним. Наприклад:

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

draggableElement.addEventListener('dragend', function(event) {
  event.target.style.opacity = '1';
  console.log('Перетягування завершено.');
});

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

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

Подія dragend також може бути використана для видалення або зміни стилів, які були застосовані під час перетягування, таких як тіні, бордюри або фонові кольори. Це дозволяє розробникам надавати користувачам візуальні підказки під час перетягування, а потім відновлювати початковий стан елементів після завершення дії. Наприклад, можна видалити клас CSS, який додавав стиль тіні під час перетягування, або скинути координати елемента до вихідних значень.

правити

Порада

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

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

Порада

Якщо ваш елемент змінює стиль під час перетягування (наприклад, стає напівпрозорим), використовуйте подію dragend для відновлення початкового стилю. Це забезпечить краще візуальне сприйняття для користувачів.

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

Порада

Використовуйте dragend для скидання будь-яких тимчасових даних, що використовуються під час перетягування. Наприклад, ви можете очистити об'єкт DataTransfer або видалити тимчасові елементи, які були створені під час перетягування.

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

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

const item = document.getElementById('draggableItem');

item.addEventListener('dragstart', function(event) {
  event.target.style.opacity = '0.5';
});

item.addEventListener('dragend', function(event) {
  event.target.style.opacity = '1';
  console.log('Перетягування завершено, стиль відновлено.');
});

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

const draggableBox = document.getElementById('draggableBox');

draggableBox.addEventListener('dragstart', function(event) {
  event.target.style.boxShadow = '5px 5px 15px rgba(0, 0, 0, 0.3)';
  event.dataTransfer.setData('text/plain', 'Перетягується елемент.');
});

draggableBox.addEventListener('dragend', function(event) {
  event.target.style.boxShadow = 'none';
  console.log('Перетягування завершено, тінь видалено.');
});