Este atributo se utiliza para especificar si un elemento se puede arrastrar o no. Los enlaces y las imágenes se pueden arrastrar de forma predeterminada. El atributo arrastrable se usa a menudo en las operaciones de arrastrar y soltar.
Etiquetas compatibles: admite todos los elementos HTML.
Sintaxis:
<element draggable = "true|false|auto">
Valor del atributo: este atributo contiene tres valores que se enumeran a continuación:
- true: este valor representa que el elemento se puede arrastrar.
- falso: este valor representa que el elemento no se puede arrastrar.
- auto: este valor representa los usos del navegador predeterminado.
Ejemplo:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>draggable attribute</title>
<style>
.dropbox {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
h1 {
color:green;
}
</style>
<script>
function droppoint(event) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
event.preventDefault();
}
function allowDropOption(event) {
event.preventDefault();
}
function dragpoint(event) {
event.dataTransfer.setData("Text", event.target.id);
}
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>draggable attribute</h2>
<div class = "dropbox" ondrop="droppoint(event)"
ondragover="allowDropOption(event)"></div>
<p id="drag1" draggable="true" ondragstart="dragpoint(event)">
GeeksforGeeks: A computer science portal for geeks</p>
</center>
</body>
</html>
Salida:
Antes de arrastrar:
Después de arrastrar y soltar
Navegadores compatibles: los navegadores compatibles con el atributo arrastrable se enumeran a continuación:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Firefox 2 y superior
- Ópera 12.0 y superior
- Safari