Atributo draggable de HTML

El atributo draggable de HTML es un atributo enumerado que especifica si el elemento se puede arrastrar o no (ya sea con el comportamiento nativo del navegador o con la API de arrastrar y soltar de HTML). Este atributo se utiliza comúnmente en las operaciones de arrastrar y soltar.

Las imágenes y los enlaces son arrastrables de forma predeterminada. Para otros elementos, debes configurar el controlador de eventos ondragstart para iniciar un arrastre y usar event.dataTransfer. También puedes usar draggable="false" para deshabilitar explícitamente el arrastre en imágenes y enlaces.

Puedes usar este atributo en cualquier elemento HTML. Forma parte de los Atributos globales.

El atributo draggable puede tener los siguientes valores:

true: el elemento se puede arrastrar.
false: el elemento no se puede arrastrar.
auto: el arrastre sigue el comportamiento predeterminado del navegador.

Sintaxis

Sintaxis del atributo draggable de HTML

html

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

Ejemplo del atributo draggable de HTML:

Ejemplo del atributo draggable de HTML

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>

Nota: Para el desarrollo moderno, se recomienda usar addEventListener en lugar de controladores de eventos en línea.

Practice

¿Qué es cierto sobre el atributo draggable de HTML?

Se utiliza para especificar si se permite al usuario arrastrar un elementoSus valores posibles son ‘auto', ‘false' y ‘true'.De forma predeterminada, el atributo draggable no está configurado en la mayoría de los elementos, excepto en enlaces e imágenesNo es posible hacer que ningún elemento HTML sea arrastrable, excepto enlaces e imágenesEl atributo draggable es una característica HTML obsoleta

Atributo draggable de HTML ​

Sintaxis ​

Ejemplo del atributo draggable de HTML: ​

Practice ​

Atributo draggable de HTML

Sintaxis

Ejemplo del atributo draggable de HTML:

Practice