Перетаскивание HTML5

Перетащите изображение CodeW3C.com в прямоугольник.

Перетаскивание

Перетаскивание (Drag и Drop) - это очень распространенная функция. Это означает, что вы захватываете что-то и перетаскиваете его в другое положение.

Перетаскивание является частью стандарта 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 вызвал функцию drag(event), которая определяет, какие данные нужно перемещать.

Метод setData() dataTransfer устанавливает тип данных и значение перемещаемого данных:

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

В данном примере тип данных - "text", а значение - идентификатор этого перемещаемого элемента ("drag1").

Где разместить - ondragover

Событие ondragover определяет, где могут быть размещены перетаскиваемые данные.

По умолчанию, данные/элементы не могут быть размещены в других элементах. Для реализации перетаскивания нам нужно предотвратить это стандартное поведение элементов.

Эта задача выполняется методом event.preventDefault() события ondragover:

event.preventDefault();

Осуществление размещения - ondrop

Событие drop occurs, когда放开 перетаскиваемые данные.

В примере выше функция ondrop вызывается функцией, drop(event):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Комментарий к коду:

  • Вызов preventDefault() для предотвращения стандартной обработки данных браузером (по умолчанию, действие по умолчанию для события drop - это открытие в виде ссылки)
  • Данные перетаскивания можно получить с помощью метода getData() объекта dataTransfer. Этот метод возвращает любое данные, установленные в setData() с тем же типом
  • Перетаскиваемые данные - это идентификатор перетаскиваемого элемента ("drag1")
  • Добавить перетаскиваемый элемент в элемент размещения

Более примеров

Возврат изображения

Как来回拖放 изображение между двумя элементами <div>:

Перетащите изображение CodeW3C.com в прямоугольник.

Попробуйте сами