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

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

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

Синтаксис:

HTML

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

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

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

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

ВсеКомпьютерыМобильные

Совместимостьhtml.global_attributes.draggable
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`draggable`	✓4	✓12	✓2	✓12	✓5	✓18	✓4	✓14	✓4.2	✓1.0	✓4.4	✓4.2

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

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

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

Пример использования

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Использование глобального атрибута draggable</title>
    <style>
      #happy_div {
        width: 100px;
        height: 50px;
        padding: 15px;
        font-weight: 900;
        border: 1px groove red;
      }
    </style>
  </head>
  <body>
    <p>Составьте слово счастье (перенося буквы в окошечко):</p>
    <script>
      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>
    <div id="happy_div" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
    <br />
    <span id="test1" draggable="true" ondragstart="drag(event)">А</span>
    <span id="test2" draggable="true" ondragstart="drag(event)">П</span>
    <span id="test3" draggable="true" ondragstart="drag(event)">Ж</span>
    <span id="test4" draggable="true" ondragstart="drag(event)">О</span>
  </body>
</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");
  ev.target.appendChild(document.getElementById(data));
  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;
}