HTML5. Drag and Drop

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Що таке Drag and Drop?

Drag and Drop - дослівний переклад з англійської - "Перетягнути і кинути"


W3Schools

Перетягніть мишкою зображення W3Schools з одного прямокутника в інший прямокутник.


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 and 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));
}

Пояснення коду:


Більше прикладів

Перетягніть за допомогою мишки зображення вперед і назад

Як перетягнути (і скинути) зображення вперед і назад між двома елементами <div> (з одного прямокутника в інший):

Спробуйте самі »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.