HTML5 Drag and Drop
У HTML будь-який елемент можна перетягувати.
Перетягніть за допомогою миші зображення W3Schools з одного прямокутника в інший прямокутник.
Drag and Drop - Перетягнути і кинути
Drag and Drop - дослівний переклад з англійської мови - 'Перетягнути і кинути'.
Перетягування (Drag and drop) - дуже розповсюджена функція. Це коли ви 'захоплюєте' мишкою об’єкт і перетягуєте його в інше місце.
В HTML5 перетягування є частиною стандарту: будь-який елемент може бути перетягнутим. Для цього використовується JavaScript.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує перетягування (Drag and Drop).
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Приклад
Нижче наведений приклад простого перетягування:
Приклад
<!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), яка вказує, які дані необхідно перетягувати.
Метод dataTransfer.setData() встановлює тип даних і значення перетягуваних даних:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
В цьому випадку тип даних - 'text', а значення - id елемента перетягування ('drag1').
Куди кинути перетягнувши - ondragover
Подія ondragover вказує, куди можна перетягнути та скинути дані.
За замовчуванням дані/елементи не можуть бути скинуті в інші елементи. Щоб дозволити скидування, необхідно запобігти обробку елемента за замовчуванням.
Це робиться шляхом виклику метода event.preventDefault() для ondragover події:
event.preventDefault()
Здійснити скидування - ondrop
Коли витягуються перетягувані дані, відбувається подія скидування.
В наведеному вище прикладі атрибут ondrop викликає функцію drop(event):
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
Пояснення коду:
- Викликати функцфю preventDefault(), щоб заборонити обробку даних за замовчуванням браузером (за замовчуванням відкривається як посилання при скидуванні);
- Отримати перетягнуті дані за допомогою метода dataTransfer.getData(). Цей метод поверне будь-які дані, які були встановлені в тому ж типі в методі setData();
- Перетягнуті дані - це id перетягнутого елемента ('drag1');
- Додайте перетягнутий елемент в елемент drop.
Більше прикладів
Перетягніть за допомогою мишки зображення вперед і назад
Як перетягнути (і скинути) зображення вперед і назад між двома елементами <div> (з одного прямокутника в інший):
