English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Manual de referencia de HTML

大全 de etiquetas HTML

Atributo draggable de HTML

La propiedad global draggable es un atributo de tipo enumerado, utilizado para identificar si el elemento permite usar el API de operaciones de arrastrar y soltar.

Los valores de draggable son los siguientes:
    true, lo que significa que el elemento se puede arrastrar
    false, lo que significa que el elemento no se puede arrastrar
Si esta propiedad no tiene un valor asignado, el valor predeterminado es auto, lo que significa que se utiliza el comportamiento predeterminado definido por el navegador.
Esta propiedad es de tipo enumerativo, no booleano. Esto significa que debe especificar explícitamente el valor true o false, como <label draggable>Example Label</label> Este atajo no está permitido. La forma correcta es <label draggable="true">Example Label</label>.
Por defecto, solo el texto seleccionado, imágenes y enlaces se pueden arrastrar. Para otros elementos, es necesario establecer el evento ondragstart del mecanismo de arrastre para que funcione correctamente

Atributos globales de HTML

Ejemplo en línea

Ejemplo que muestra un párrafo arrastrable:

!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>Manual básico(w3(codebox.com)</title>
<style type="text/css">
#div1 {ancho:400px;altura:80px;relleno:10px;borde:1px sólido rojo;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<br />
<p id="drag1"true"ondragstart="drag(event)">Esto es un párrafo que se puede mover. Por favor, arrastra este párrafo al cuadro rojo superior.</p>
</body>
</html>
Prueba aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Los navegadores Chrome y Safari admiten la propiedad draggable.

Nota: Internet Explorer 8 y versiones de IE anteriores no admiten la propiedad draggable.

Definición y uso

La propiedad draggable especifica si el elemento es arrastrable o no.
Consejo:Los enlaces y las imágenes son por defecto arrastrables.
Consejo: La propiedad draggable se utiliza generalmente en operaciones de arrastrar y soltar.

HTML 4.01 y HTML5las diferencias entre

La propiedad draggable es de HTML5 Añadido recientemente.

Sintaxis

        <elemento draggable="true|false|auto">

Valor del atributo

ValorDescripción
trueSe especifica que el elemento es arrastrable.
falseSe especifica que el elemento no es arrastrable.
autoUsar las características predeterminadas del navegador.
Atributos globales de HTML