HTML Drag and Drop API
В HTML любой элемент можно перетащить.
Перетащите
Перетаскивание - очень распространенная особенность. Это когда вы "захватаете" объект и перетаскиваете его в другое место.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает перетаскивание.
Пример перетаскивания 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">
Это может показаться сложным, но давайте пройдемся по всем различным частям события перетаскивания.
Сделать элемент перетаскиваемым
Прежде всего: чтобы сделать элемент перетаскиваемым, установите атрибуту draggable значение true:
Что перетащить - ondragstart и setData()
Затем укажите, что должно произойти при перетаскивании элемента.
В приведенном выше примере атрибут ondragstart вызывает функцию drag(событие), которая определяет, какие данные следует перетаскивать.
Метод dataTransfer.setData() устанавливает тип данных и значение перетаскиваемых данных:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
В этом случае тип данных - "текст", а значение - идентификатор перетаскиваемого элемента ("drag1").
Куда бросить - ondragover
Событие ondragover указывает, куда могут быть удалены перетаскиваемые данные.
По умолчанию данные/элементы не могут быть удалены в другие элементы. Чтобы разрешить падение, мы должны предотвратить обработку элемента по умолчанию.
Это делается путем вызова метода event.preventDefault() для события ondragover:
Сделать Drop - 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")
- Вставьте перетаскиваемый элемент в перетаскиваемый элемент