HTML API для Drag and Drop
API HTML Drag and Drop позволяет перетаскивать элемент.
Перетаскивание (Drag and Drop)
Перетаскивание — очень распространённая функция. Это когда вы «хватаете» объект и перетаскиваете его в другое место.
Поддержка браузерами
Drag and Drop поддерживается всеми современными браузерами (начиная с Chrome 4, Edge 9, Firefox 3.5, Safari 6 и Opera 12).
Пример API HTML Drag and Drop
Вот простой пример перетаскивания: перетаскиваемое изображение и целевой div.
Пример
Перетаскивание изображения в div.
Результат: полная HTML-страница
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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" class="dropzone" 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">Draggable text</p>
Что перетаскивать - ondragstart и setData()
Далее укажите, что происходит при перетаскивании элемента. Атрибут ondragstart элемента вызывает функцию (здесь dragstartHandler), которая задаёт перетаскиваемые данные. Метод dataTransfer.setData() задаёт тип и значение данных; в примере тип — «text», а значение — id перетаскиваемого элемента.
Куда сбрасывать - ondragover
Атрибут ondragover целевого элемента вызывает функцию (здесь dragoverHandler), которая указывает, куда можно сбросить данные. По умолчанию данные нельзя сбрасывать в другие элементы, поэтому, чтобы разрешить сброс, нужно вызвать preventDefault() для события ondragover.
Выполнение сброса - ondrop
Когда перетаскиваемые данные сбрасываются, возникает событие drop. Атрибут ondrop цели вызывает функцию (здесь dropHandler), которая: вызывает preventDefault(), чтобы остановить стандартное поведение браузера (открытие данных как ссылки), получает перетаскиваемые данные с помощью dataTransfer.getData() (id перетаскиваемого элемента) и добавляет перетаскиваемый элемент в цель сброса.
Больше примеров
Те же обработчики могут перетаскивать другие виды элементов в div или перемещать изображение туда-обратно между двумя div-ами.
Перетаскивание h1 в div
Перетаскивание заголовка в div.
Результат: полная HTML-страница
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">PromptCookbook</h1>
</body>
</html>
Перетаскивание ссылки в div
Перетаскивание ссылки в div.
Результат: полная HTML-страница
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
<a id="link1" href="https://prompt-cookbook.com" draggable="true" ondragstart="dragstartHandler(event)">PromptCookbook</a>
</body>
</html>
Перетаскивание туда-обратно между двумя div-ами
Перемещение изображения между двумя div-ами.
Результат: полная HTML-страница
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.dropzone {
width: 350px;
height: 80px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<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" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">
</div>
<br>
<div id="div2" class="dropzone" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
</body>
</html>