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

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

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

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

Синтаксис:

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

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

ЗначениеОписаниеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
trueУказывает, что элемент можно перетаскивать.4.03.512.06.09.012.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>

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


А П Ж О

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