W3docs
ru
Войти

Атрибут draggable HTML

The HTML draggable attribute is an enumerated attribute and specifies whether the element is draggable or not. Read and see on what elements it can be used.

Атрибут draggable HTML является перечисляемым атрибутом и указывает, можно ли перетаскивать элемент или нет (с помощью встроенного поведения браузера или API перетаскивания HTML Drag and Drop). Этот атрибут часто используется в операциях перетаскивания.

Изображения и ссылки по умолчанию перетаскиваются. Для других элементов необходимо установить обработчик события ondragstart для начала перетаскивания и использовать event.dataTransfer. Вы также можете использовать draggable="false", чтобы явно отключить перетаскивание для изображений и ссылок.

Вы можете использовать этот атрибут на любом HTML-элементе. Он является частью Глобальных атрибутов.

Атрибут draggable может принимать следующие значения:

  • true: элемент можно перетаскивать.
  • false: элемент нельзя перетаскивать.
  • auto: используется поведение браузера по умолчанию.

Синтаксис

Синтаксис атрибута draggable HTML

<tag draggable="true|false|auto"></tag>

Пример атрибута draggable HTML:

Пример атрибута draggable HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #rectId {
        width: 350px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script>
      function allowDrop(event) {
        event.preventDefault(); // Allow dropping
      }
      function drag(event) {
        // Store the dragged element's ID in the dataTransfer object
        event.dataTransfer.setData("Text", event.target.id);
      }
      function drop(event) {
        var data = event.dataTransfer.getData("Text"); // Retrieve the ID
        event.target.appendChild(document.getElementById(data));
        event.preventDefault();
      }
    </script>
  </head>
  <body>
    <div id="rectId" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <p id="dragId" draggable="true" ondragstart="drag(event)">
      This is a draggable paragraph. Drag this item to the rectangle.
    </p>
  </body>
</html>

Примечание: Для современной разработки рекомендуется использовать addEventListener вместо встроенных обработчиков событий.

«Попробуйте сами» недоступно для этого примера.

Practice

Практика

Что верно об атрибуте draggable HTML?