API перетаскивания HTML
В HTML любой элемент можно перетащить.
Пример
Перетащите изображение W3Schools в прямоугольник.
Перетащите
Перетаскивание — очень распространенная функция. Это когда вы «хватаете» объект и перетаскиваете его в другое место.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает перетаскивание.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Пример HTML-перетаскивания
Пример ниже представляет собой простой пример перетаскивания:
Пример
<!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);
}
В этом случае тип данных — «текст», а значение — идентификатор перетаскиваемого элемента («drag1»).
Куда бросить - ондраговер
Событие 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().
- Перетаскиваемые данные — это идентификатор перетаскиваемого элемента ("drag1").
- Добавить перетащенный элемент в перетаскиваемый элемент
Дополнительные примеры
Пример
Как перетаскивать (и бросать) изображение между двумя элементами <div> и обратно: