Глобальный атрибут draggable

Глобальный атрибут draggable указывает, можно ли перетаскивать элемент используя Drag and Drop API.

Синтаксис

<элемент draggable="true | false | auto">

Значения

Атрибут может принимать одно из следующих значений:

Значение	Описание
`true`	Разрешает перетаскивание элемента.
`false`	Запрещает перетаскивание элемента.
`auto`	Это значение означает, что для элемента будет использовано поведение, установленное в браузере по умолчанию. По умолчанию перетаскивать можно только изображения и ссылки. Если атрибут `draggable` не указан явно для элемента, то подразумевается установленным значение `auto`.

Значение по умолчанию

auto

Пример

#divDrop {
  width: 420px;
  height: 60px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
#pDrag { cursor: grab; }

const draggableElement = document.querySelector('#pDrag');

draggableElement.addEventListener("dragstart", (ev) =>
  ev.dataTransfer.setData("Text", ev.target.id),
);

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

function drop(ev) {
  let data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
}

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

<p id="pDrag" draggable="true">Переместите этот элемент в прямоугольник.</p>

Результат

Переместите этот элемент в прямоугольник.