HTML5 Drag and Drop
Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих
Что такое Drag and Drop?
Drag and Drop - дословный перевод с английского языка - "Перетянуть и кинуть"
Перетяните мышкой изображение 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 вызывает функцию drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Объяснение кода:
- Вызвать функцию preventDefault(), чтобы запретить обработку данных по умолчанию браузером (по умолчанию открывается как ссылка при скидывании);
- Получить перетянутые данные с помощью метода dataTransfer.getData(). Этот метод возвратит любые данные, которые были установлены в том же типе в методе setData();
- Перетянутые данные - это id перетянутого элемента ("drag1");
- Добавьте перетянутый элемент в элемент drop.
Больше примеров
Перетяните с помощью мышки изображение вперёд и назад
Как перетянуть (и скинуть) изображение вперёд и назад между двумя элементами <div> (с одного прямоугольника в другой):