draggable

El atributo draggable, permite especificar si el elemento sobre el cual se aplica el atributo es un elemento, sobre el cual se puede aplicar la acción de arrastrar y soltar (“drag and drop”).



Como es lógico para producir efectos sobre la visualización del documento en el navegador este atributo se suele programar en conjunto con lenguajes de programación del cliente, como JavaScript.

Los valores posibles para el atributo son: true, que especifica que el elemento se puede arrastrar, false, indica que no se puede arrastrar el elemento y por último auto, indicando que se deja al navegador la elección de posibilidad de arrastrar o no el elemento.

La sintaxis del atributo aplicada a un elemento HTML, es la siguiente.

<p draggable=”valor”>Texto del párrafo</p>

El siguiente ejemplo muestra la aplicación del atributo a elementos de un documento web, aunque no proporciona interactividad ya que no tiene asociada programación en JavaScript.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<p draggable="true">Este Texto se puede arrastrar.</p>
<p draggable="false">Este Texto no se puede arrastrar.</p>
<p draggable="auto">Este Texto es automático.</p>
</body>
</html>

El resultado del ejercicio anterior en el navegador ha de ser similar al que se muestra en la imagen siguiente.

Atributos Globales - Atributo draggable html5

Atributos Globales – Atributo draggable html5

Gracias por vuestra visita y un saludo!!!