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