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

Определение и применение

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

Синтаксис:

HTML
<element draggable = "true | false">

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьhtml.global_attributes.draggable
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
draggable✓4✓12✓2✓12✓5✓18✓4✓14✓4.2✓1.0✓4.4✓4.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

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

Значение Описание
true Указывает, что элемент можно перетаскивать.
false Указывает, что элемент нельзя перетаскивать.
auto Состояние при отсутствии или недопустимом значении атрибута; auto не является допустимым ключевым словом.

Записывайте draggable="true" явно: сокращение draggable не включает перетаскивание. Атрибут сам не реализует перенос данных или приём: для этого нужны dragstart, dragover и drop. Поведение сенсорного ввода проверяйте отдельно.

Примеры, попробуйте сами

Перетаскивание букв

Нажмите ▶. Измените разметку во вкладке HTML и сравните результат.

index.html
HTML
<p>Составьте слово счастье (перенося буквы в окошечко):</p>
<div id="happy_div"></div>
<br />
<span id="test1" draggable="true">А</span>
<span id="test2" draggable="true">П</span>
<span id="test3" draggable="true">Ж</span>
<span id="test4" draggable="true">О</span><br /><br />
main.js
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')
    const dragged = document.getElementById(data)
    if (dragged) ev.currentTarget.appendChild(dragged)
    ev.preventDefault()
}
document.getElementById('happy_div').addEventListener('drop', drop)
document.getElementById('happy_div').addEventListener('dragover', allowDrop)
document.getElementById('test1').addEventListener('dragstart', drag)
document.getElementById('test2').addEventListener('dragstart', drag)
document.getElementById('test3').addEventListener('dragstart', drag)
document.getElementById('test4').addEventListener('dragstart', drag)
style.css
CSS
#happy_div {
    width: 100px;
    height: 50px;
    padding: 15px;
    border: 1px groove red;
    font-weight: 900;
}