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, який додавав стиль тіні під час перетягування, або скинути координати елемента до вихідних значень.
| Порада: | Переконайтеся, що ви також обробляєте події |
| Порада: | Якщо ваш елемент змінює стиль під час перетягування (наприклад, стає напівпрозорим), використовуйте подію |
| Порада: | Використовуйте |
Синтаксис
element.addEventListener('dragend', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач може перетягувати різні елементи в цільову область. Подія dragend використовується для відновлення прозорості елемента після завершення перетягування. Якщо елемент успішно скинуто в область, збільшується лічильник, що відображає кількість успішних скидань. Кнопка "Очистити" дозволяє скинути лічильник і повернути елементи на початкову позицію, що робить інтерфейс більш динамічним і інтерактивним.
У цьому прикладі, коли користувач починає перетягувати елемент, його прозорість змінюється, щоб візуально показати стан перетягування. Після завершення перетягування прозорість повертається до вихідного значення, забезпечуючи плавний перехід між станами елемента.
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('Перетягування завершено, стиль відновлено.');
});У цьому прикладі, коли користувач починає перетягувати елемент, до нього додається тінь, щоб підкреслити перетягування. Після завершення перетягування тінь видаляється, а тимчасові дані очищуються, що забезпечує більш чистий і зрозумілий інтерфейс користувача.
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('Перетягування завершено, тінь видалено.');
});