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

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

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

Синтаксис:

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

Поддержка браузерами и значения атрибута

Значение	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
true	Указывает, что элемент можно перетаскивать.	4.0	3.5	12.0	6.0	9.0	12.0
false	Указывает, что элемент нельзя перетаскивать.
auto	Использует настройки браузера.

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

<!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>

Составьте слово счастье (перенося буквы в окошечко):

А П Ж О

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