Перетаскивание 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 определяет, где могут быть размещены перетаскиваемые данные.

По умолчанию данные/элементы не могут быть размещены в других элементах. Для реализации drag and drop我们必须 предотвратить это стандартное поведение элементов.

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

event.preventDefault();

Выполнить放置 - ondrop

Происходит событие drop, когда отпускается перетаскиваемый элемент.

В предыдущем примере�性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 в прямоугольник.

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