HTML API Перетаскивания

HTML-API перетаскивания (Drag and Drop) позволяет перетаскивать элементы.

Пример

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

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

Перетаскивание (drag and drop) — очень распространённая функция. Она подразумевает, что вы «захватываете» объект и перемещаете его в другое место.

Поддержка в браузерах

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает функцию перетаскивания (Drag and Drop).

API
Перетаскивание	4.0	9.0	3.5	6.0	12.0

Пример использования API перетаскивания

Ниже приведён простой пример реализации перетаскивания:

Пример

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>

Это может показаться сложным, но давайте разберём все части события перетаскивания по отдельности.

Делаем элемент перетаскиваемым

Прежде всего: чтобы сделать элемент перетаскиваемым, установите атрибут draggable в значение true:

<img id="img1" draggable="true">

или:

<p id="p1" draggable="true">Перетаскиваемый текст</p>

Что перетаскивать — ondragstart и setData()

Затем укажите, что должно происходить, когда элемент перетаскивается.

В приведённом выше примере атрибут ondragstart элемента <img> вызывает функцию (dragstartHandler(ev)), которая определяет, какие данные будут перетаскиваться.

Метод dataTransfer.setData() задаёт тип данных и значение перетаскиваемых данных:

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

В данном случае тип данных — «text», а значение — идентификатор перетаскиваемого элемента («img1»).

Куда перетаскивать — ondragover

Атрибут ondragover элемента <div> вызывает функцию (dragoverHandler(ev)), которая указывает, куда можно поместить перетаскиваемые данные.

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

Это делается путём вызова метода preventDefault() для события ondragover:

function dragoverHandler(ev) {
  ev.preventDefault();
}

Выполнение перетаскивания — ondrop

Когда перетаскиваемые данные отпускаются, возникает событие drop.

В приведённом выше примере атрибут ondrop элемента <div> вызывает функцию dropHandler(event):

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

Объяснение кода:

Вызываем preventDefault(), чтобы предотвратить стандартную обработку данных браузером (по умолчанию при отпускании открывается ссылка).
Получаем перетаскиваемые данные с помощью метода dataTransfer.getData(). Этот метод вернёт любые данные, которые были установлены с тем же типом в методе setData().
Перетаскиваемые данные — это идентификатор перетаскиваемого элемента («img1»).
Добавляем перетаскиваемый элемент в целевой элемент для размещения.

Дополнительные примеры

Пример

Как перетащить элемент <h1> в элемент <div>:

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">HTMLClub.ru</h1>

Пример

Как перетащить элемент <a> в элемент <div>:

<script>
function dragstartHandler(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://htmlclub.ru" draggable="true" ondragstart="dragstartHandler(event)">HTMLClub.ru</a>