Руководство по HTML

Полный список тегов HTML

Атрибут draggable в HTML

Глобальный параметр draggable - это свойство типа перечисления, которое используется для обозначения того, позволяет ли элемент использовать API для перетаскивания.

Значения параметра draggable такие как:
　　　 true, означает что элемент может быть перетаскиваемым
　　　 false, означает что элемент не может быть перетаскиваемым
Если этот атрибут не установлен, то значение по умолчанию составляет auto, что означает использование поведения по умолчанию, определенного браузером.
Этот атрибут является типом перечисления, а не типом boolean. Это означает, что необходимо явно указать значение true или false, и сокращение, такое как <label draggable>Example Label</label>, не допускается. Корректное использование: <label draggable="true">Example Label</label>.
По умолчанию, можно перетаскивать только выделенный текст, изображения и ссылки. Для других элементов необходимо установить событие ondragstart в порядке работы механизма перетаскивания, чтобы они работали корректно

Глобальные атрибуты HTML

Онлайн пример

Пример демонстрирует отрывной абзац:

Пример

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:400px;height:80px;padding:10px;border:1px solid red;}
</style>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br/>
<p id="drag1" draggable="true" ondragstart="drag(event)">Это отрывной абзац. Пожалуйста, перетащите этот абзац в красную прямоугольную рамку上方.</p>
</body>
</html>

Проверьте, <<>>

Совместимость с браузерами

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Браузеры Chrome и Safari поддерживают атрибут draggable.

Внимание: Internet Explorer 8 и более ранние версии IE не поддерживают атрибут draggable.

Определение и использование

Атрибут draggable определяет, можно ли перетаскивать элемент.
Совет:Ссылки и изображения по умолчанию могут быть перетаскиваемыми.
Совет: Атрибут draggable обычно используется в операциях перетаскивания.

Различия между HTML 4.01 и HTML5

Атрибут draggable добавлен в HTML5.

Синтаксис

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

Значение атрибута

Значение	Описание
true	Определяет, можно ли перемещать элемент.
false	Определяет, можно ли перемещать элемент.
auto	Используйте стандартные функции браузера.

Глобальные атрибуты HTML

HTML: <template> тег