Manual de referência do HTML

大全 de etiquetas HTML

Atributo draggable do HTML

A propriedade global draggable é um atributo de tipo enumerativo, usado para identificar se o elemento permite o uso da API de operações de arrastar e soltar.

Os valores de draggable são os seguintes:
　　　 true, significa que o elemento pode ser arrastado
　　　 false, significa que o elemento não pode ser arrastado
Se essa propriedade não for configurada, o valor padrão é auto, o que significa que é usado o comportamento padrão definido pelo navegador.
Essa propriedade é do tipo enum, não booleano. Isso significa que é necessário especificar explicitamente o valor true ou false, como <etiqueta draggable>Example Label</etiqueta> Essa abreviação não é permitida. A forma correta é <etiqueta draggable="true">Example Label</etiqueta>.
Por padrão, apenas texto selecionado, imagens e links podem ser arrastados. Para outros elementos, é necessário configurar a ordem do evento ondragstart para que funcione corretamente

Atributos Globais do HTML

Exemplo Online

Exemplo demonstra uma seção arrastável:

Exemplo

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">　
<título>Manual Básico(w3(codebox.com)</título>
<style type="text/css">
#div1　{largura:400px; altura:80px; espaçamento:10px; borda:1px sólido vermelho;}
</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)">Esta é uma seção móvel. Arraste esta seção para dentro da caixa retangular vermelha acima.</p>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari browsers support the draggable attribute.

Note: Internet Explorer 8 and earlier IE versions do not support the draggable attribute.

Definition and usage

The draggable attribute specifies whether an element is draggable.
Tip:Links and images are draggable by default.
Tip: The draggable attribute is usually used in drag and drop operations.

HTML 4.01 between HTML5difference

The draggable attribute is an HTML5 Newly added.

Syntax

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

Attribute value

Value	Description
true	Define that the element is draggable.
false	Define that the element is not draggable.
auto	Use the browser's default features.

Atributos Globais do HTML

HTML: <template> tag