HTML5 Drag and Drop
В HTML любой элемент можно сделать перетаскиваемым.
Перетащите изображение W3Schools из одного прямоугольника в другой.
Drag and Drop — Перетащить и отпустить
Drag and Drop — дословно «перетащить и отпустить».
Перетаскивание — очень распространённая функция. Это когда вы «захватываете» объект мышью и переносите его в другое место.
В HTML5 перетаскивание является частью стандарта: любой элемент может быть перетаскиваемым. Для этого используется JavaScript.
Поддержка браузерами
Цифры в таблице показывают первую версию браузера, которая полностью поддерживает перетаскивание (Drag and Drop).
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Пример
Ниже приведен пример простого перетягивания:
Приклад
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Попробуйте сами »Это может показаться сложным, но давайте разберём все части механизма перетаскивания.
Создание перетаскиваемого элемента
Прежде всего: чтобы сделать элемент перетаскиваемым, установите атрибут draggable в значение true:
<img draggable="true">
Как начать перетаскивание — ondragstart и setData()
Далее нужно указать, что должно происходить, когда элемент начинает перетаскиваться.
В примере выше атрибут ondragstart вызывает функцию drag(event), которая определяет, какие данные будут переданы при перетаскивании.
Метод dataTransfer.setData() задаёт тип данных и значение:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
В данном случае тип данных — "text", а значение — id перетаскиваемого элемента ("drag1").
Куда можно бросить — событие ondragover
Событие ondragover определяет область, куда можно сбросить данные.
По умолчанию элементы нельзя сбрасывать в другие элементы. Чтобы разрешить сброс, нужно отменить стандартное поведение браузера.
Это делается вызовом event.preventDefault() внутри обработчика ondragover:
event.preventDefault()
Выполнение сброса — событие ondrop
Когда перетаскиваемые данные отпускаются, срабатывает событие ondrop.
В примере выше атрибут ondrop вызывает функцию drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Пояснение кода:
- Вызов
preventDefault()запрещает браузеру выполнять действие по умолчанию (например, открывать изображение как ссылку). - Метод
getData()получает данные, переданные вsetData(). - Полученные данные — это id перетаскиваемого элемента ("drag1").
- Элемент с этим id добавляется внутрь элемента, на который был выполнен сброс.
Больше примеров
Перетащите изображение туда и обратно
Как перетаскивать изображение между двумя блоками <div>:
