HTML5 Перетаскивание
Перетащите html5css изображение в прямоугольник.
Перетаскивание
Перетаскивание является очень распространенной функцией. Это когда вы "захватить" объект и перетащить его в другое место.
В HTML5 перетаскивание является частью стандарта: любой элемент можно перетащить.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает перетаскивание.
| API | |||||
|---|---|---|---|---|---|
| Перетаскивание | 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 вызывает функцию, перетаскивание (событие), указывающее, какие данные следует перетащить.
Метод dataTransfer.setData() задает тип данных и значение перетаскивания данных:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
In this case, the data type is "text" and the value is the id of the draggable element ("drag1").
Куда отказаться - ondragover
Событие ondragover указывает, куда можно удалить перетаскивание данных.
По умолчанию данные/элементы не могут быть удалены в других элементах. Чтобы разрешить перетаскивание, мы должны запретить обработку элемента по умолчанию.
Это делается путем вызова метода event.preventDefault() для события ondragover:
event.preventDefault()
Када отпустить - OnDrop
Когда перетаскивание данных удаляется, происходит событие Drop.
В приведенном выше примере атрибут OnDrop вызывает функцию, Drop (событие):
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Как работает код:
- CallpreventDefault(), чтобы запретить браузер по умолчанию обработки данных (по умолчанию открыта как ссылка на падение)
- Получите перенесенные данные с помощью метода Data Transfer.GetData(). Этот метод возвращает все данные, которые были установлены в один и тот же тип в методе SetData()
- Перетаскивание данных является идентификатором перетаскивания элемента ("drag")
- Добавление перетаскивания элемента в элемент перетаскивания
Другие примеры
Перетаскивание изображения вперед и назад
Как перетащить (отпустить) изображения вперед и назад между двумя <div> элементы: