HTML - Drag and Drop API: руковод BEGINNERS

Здравствуйте, будущие веб-разработчики! Сегодня мы отправляемся в увлекательное путешествие в мир API перетаскивания HTML5. Как ваш добрый соседский компьютерный учитель, я здесь, чтобы помочь вам понять эту fascynating особенность, которая может сделать ваши веб-страницы более интерактивными и удобными для пользователей. Так что возьмите любимый напиток, устройтесь поудобнее и давайте окунемся в это!

HTML - Drag & Drop API

Что такое API перетаскивания?

Прежде чем мы начнем перетаскивать элементы, как цифровые маги, давайте поймем, что это за API. API перетаскивания (DnD) позволяет нам сделать HTML-элементы перетаскиваемыми, то есть пользователи могут щелкнуть на элементе, перетащить его в новое место и放下 его там. Это как наделить ваши веб-страничные элементы суперсилами!

Делаем элемент перетаскиваемым

Давайте начнем с азов. Чтобы сделать элемент перетаскиваемым, нам нужно использовать атрибут draggable. Это так просто, как добавить этот атрибут к любому HTML-элементу, который вы хотите, чтобы пользователи могли передвигать.

<div draggable="true">Перетащи меня!</div>

В этом примере мы создали элемент <div> и сделали его перетаскиваемым, установив draggable="true". Теперь пользователи могут щелкнуть на этом div и перетащить его по странице. Круто, правда?

Но подождите, есть еще! Просто сделать элемент перетаскиваемым недостаточно. Нам нужно добавить немного JavaScript для управления тем, что происходит при перетаскивании и отпускании элемента. Вот где наши события перетаскивания и отпускания могут помочь.

События перетаскивания и отпускания

API перетаскивания предоставляет нам несколько событий, на которые мы можем подписаться и реагировать. Эти события позволяют нам контролировать весь процесс перетаскивания и отпускания. Давайте посмотрим на основные события:

Название события	Описание
dragstart	Вызывается, когда пользователь начинает перетаскивать элемент
drag	Вызывается постоянно, пока пользователь перетаскивает элемент
dragenter	Вызывается, когда перетаскиваемый элемент enters вGRAMMARP valid drop target
dragover	Вызывается постоянно, пока перетаскиваемый элемент находится над valid drop target
dragleave	Вызывается, когда перетаскиваемый элемент покидает valid drop target
drop	Вызывается, когда пользователь отпускает элемент
dragend	Вызывается, когда операция перетаскивания заканчивается (успешно или нет)

Теперь давайте посмотрим, как мы можем использовать эти события на практике:

<div id="draggable" draggable="true">Перетащи меня!</div>
<div id="droppable">Отпусти сюда!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('Начало перетаскивания');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // Необходимо для разрешения отпускания
console.log('Перетаскивание над зоной отпускания');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('Отпущено!');
droppable.appendChild(draggable);
});
</script>

В этом примере мы создали два элемента <div>: один перетаскиваемый и один для отпускания. Мы добавили обработчики событий для dragstart, dragover и drop. Когда вы перетаскиваете элемент и отпускаете его в зоне отпускания, вы увидите сообщения в консоли, и перетаскиваемый элемент будет перемещен в зону отпускания.

Объект DataTransfer

Теперь давайте поговорим о мощном инструменте в нашем арсенале перетаскивания: объекте DataTransfer. Этот объект используется для хранения данных, которые перетаскиваются во время операции перетаскивания и отпускания. Он позволяет нам устанавливать и получать информацию о операции перетаскивания.

Вот как мы можем использовать его:

<div id="draggable" draggable="true">Перетащи меня!</div>
<div id="droppable">Отпусти сюда!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

В этом примере мы используем setData() для хранения ID перетаскиваемого элемента при начале перетаскивания. Затем, в событии drop, мы получаем эти данные с помощью getData() и используем их для перемещения перетаскиваемого элемента.

Процесс перетаскивания и отпускания

Теперь, когда мы рассмотрели отдельные части, давайте пройдемся по всему процессу перетаскивания и отпускания:

Начало перетаскивания: Пользователь щелкает на перетаскиваемом элементе и начинает перетаскивать.
Перетаскивание: Пока пользователь передвигает мышь, событие drag вызывается постоянно.
Вхождение в зону отпускания: Когда перетаскиваемый элемент enters в зону отпускания, событие dragenter вызывается.
Нахождение над зоной отпускания: Пока перетаскиваемый элемент находится над зоной отпускания, событие dragover вызывается постоянно.
Покидание зоны отпускания: Если перетаскиваемый элемент покидает зону отпускания, событие dragleave вызывается.
Отпускание: Когда пользователь отпускает элемент, событие drop вызывается.
Конец перетаскивания: Наконец, событие dragend вызывается для сигнализации окончания операции перетаскивания.

Вот пример, который объединяет все это:

<div id="draggable" draggable="true">Перетащи меня!</div>
<div id="droppable">Отпусти сюда!</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});

draggable.addEventListener('dragend', (e) => {
e.target.style.opacity = '';
});

droppable.addEventListener('dragenter', (e) => {
e.target.style.background = 'lightblue';
});

droppable.addEventListener('dragleave', (e) => {
e.target.style.background = '';
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
e.target.style.background = '';
});
</script>

В этом примере мы реализовали все события перетаскивания и отпускания. Мы изменяем прозрачность перетаскиваемого элемента во время перетаскивания, выделяем зону отпускания, когда элемент перетаскивается над ней, и перемещаем перетаскиваемый элемент в зону отпускания при отпускании.

И вот и все, друзья! Вы только что узнали основы API перетаскивания HTML5. С этими знаниями вы можете создавать интерактивные элементы на своих веб-страницах, которые пользователи могут перетаскивать и отпускать. Помните, практика делает мастера, так что не бойтесь экспериментировать и создавать свои собственные проекты перетаскивания и отпускания.

Заканчивая наш урок, я вспомнил цитату великого Брюса Ли: "Я не боюсь человека, который practiced 10 000 ударов один раз, но я боюсь человека, который practiced один удар 10 000 раз." Так что идите и практикуйте свои навыки перетаскивания и отпускания. Before you know it, вы будете создавать потрясающие интерактивные веб-опыты, которые сразят ваших пользователей наповал!

Счастливого кодирования, и пусть ваши элементы всегда падают туда, где вы хотите!

Credits: Image by storyset

Предыдущий учебник:

HTML - API геолокации

Следующий учебник:

HTML - API Web Workers