Функция перетаскивания (drag and drop) в HTML5 позволяет пользователю перетаскивать элемент с места на место. При перетаскивании элемента он выделяется полупрозрачным цветом и следует за указателем мыши.
Посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Использование Drag and Drop</title>
<script>
function dragStart(e) {
// Устанавливаем разрешение для перетаскивания
e.dataTransfer.effectAllowed = "move";
// Устанавливаем значение и тип перетаскиваемых данных
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
// Запрещаем браузеру обработку данных по умолчанию
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
// Отменяем это событие для всех остальных
e.stopPropagation();
e.preventDefault();
// Получаем перетаскиваемые данные по типу
var data = e.dataTransfer.getData("Text");
// Добавляем изображение в выпадающий список
e.target.appendChild(document.getElementById(data));
}
</script>
<style>
#dropBox {
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img {
margin: 25px;
}
</style>
</head>
<body>
<h2>Drag and Drop Demo</h2>
<p>Перетащите изображение в выпадающее окно:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Изображение будет вставлено сюда-->
</div>
<img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>Вы можете сделать элемент перетаскиваемым, установив атрибут draggable в значение true, например, draggable="true". Однако в большинстве веб-браузеров выбор текста, изображений и элементов с атрибутом href по умолчанию можно перетаскивать.
Drag и Drop события
На различных этапах операции перетаскивания запускается ряд событий. Но такие события мыши, как mousemove, не запускаются во время операции перетаскивания.
В следующей таблице представлен краткий обзор всех событий перетаскивания.
| Событие | Описание |
|---|---|
ondragstart |
Запускается, когда пользователь начинает перетаскивать элемент. |
ondragenter |
Запускается, когда перетаскиваемый элемент впервые перемещается в контейнер отбрасывания. |
ondragover |
Запускается, когда пользователь перетаскивает элемент поверх контейнера отбрасывания. |
ondreagleave |
Запускается, когда пользователь перетаскивает элемент из контейнера. |
ondrag |
Запускается, когда пользователь перетаскивает элемент куда-либо; срабатывает постоянно, но может давать координаты X и Y курсора мыши. |
ondrop |
Вызывается, когда пользователь успешно помещает элемент в контейнер. |
ondragend |
Запускается, когда действие перетаскивания завершено, независимо от того, было оно успешным или нет. Это событие не вызывается при перетаскивании файла в браузер с рабочего стола. |
Функция перетаскивания в HTML5 доступна во всех основных браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 9 и выше.
