HTML draggable-Attribut

Das HTML draggable-Attribut ist ein aufgezähltes Attribut und gibt an, ob das Element ziehbar ist oder nicht (entweder mit dem nativen Browserverhalten oder der HTML Drag-and-Drop-API). Dieses Attribut wird häufig bei Drag-and-Drop-Operationen verwendet.

Bilder und Links sind standardmäßig ziehbar. Für andere Elemente müssen Sie den ondragstart-Event-Handler festlegen, um einen Drag-Vorgang zu starten, und event.dataTransfer verwenden. Sie können auch draggable="false" verwenden, um das Ziehen für Bilder und Links explizit zu deaktivieren.

Sie können dieses Attribut auf jedem HTML-Element verwenden. Es ist Teil der Globalen Attribute.

Das draggable-Attribut kann die folgenden Werte annehmen:

true: Das Element kann gezogen werden.
false: Das Element kann nicht gezogen werden.
auto: Das Ziehen entspricht dem Standardbrowserverhalten.

Syntax

Syntax des HTML draggable-Attributs

html

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

Beispiel für das HTML draggable-Attribut:

Beispiel für das HTML draggable-Attribut

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>

Hinweis: Für die moderne Entwicklung wird empfohlen, addEventListener anstelle von Inline-Event-Handlern zu verwenden.

Try it Yourself »

Practice

Was gilt für das HTML draggable-Attribut?

Es wird verwendet, um anzugeben, ob der Benutzer ein Element ziehen darfDie möglichen Werte sind ‚auto‘, ‚false‘ und ‚true‘.Standardmäßig ist das draggable-Attribut bei den meisten Elementen nicht festgelegt, außer bei Links und BildernEs ist nicht möglich, ein beliebiges HTML-Element ziehbar zu machen, außer Links und BilderDas draggable-Attribut ist eine veraltete HTML-Funktion

HTML draggable-Attribut ​

Syntax ​

Beispiel für das HTML draggable-Attribut: ​

Practice ​

HTML draggable-Attribut

Syntax

Beispiel für das HTML draggable-Attribut:

Practice