Атрибут draggable у HTML — перетягування елемента

Загальний HTML атрибут draggable задає чи можна перетягувати елемент чи ні.

Зазвичай використовується для Drag and Drop операцій.

правити

Нотатка

Посилання та зображення можна перетягувати за замовчуванням.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

<element draggable="true|false|auto">

Атрибут draggable може отримувати 3 значень:

true

Каже, що елемент можна перетягувати.

автор: NagarD

правити

false

Каже, що елемент заборонено перетягувати.

автор: NagarD

правити

auto

Каже, що браузер самостійно визначить значення. Значення без задання.

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	4	2	5	12	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	4.2

Приклади

+ запропонувати свій приклад у пісочниці

<p draggable="true">Цей абзац можна тягнути мишею — спробуй.</p>
<p>А цей — звичайний, не потягнеш.</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>

<p id="drag1" draggable="true" ondragstart="drag(event)">Перетягни мене в вікно, що вище.</p>

#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

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

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}
//# sourceURL=pen.js