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.

Try it Yourself »

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