English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'attributo globale draggable è un attributo di tipo enumerativo, utilizzato per indicare se l'elemento può essere trascinato utilizzando l'API di operazioni di trascinamento e rilascio.
I valori di draggable sono i seguenti:
true, indica che l'elemento può essere trascinato
false, indica che l'elemento non può essere trascinato
Se questa proprietà non è impostata, il valore predefinito è auto, che indica l'uso del comportamento predefinito definito dal browser.
Questa proprietà è di tipo enumerativo, non booleano. Questo significa che è necessario specificare esplicitamente il valore true o false, come nel caso di <label draggable>Example Label</label> che non è permesso. L'uso corretto è <label draggable="true">Example Label</label>.
Per impostazione predefinita, solo il testo selezionato, le immagini e i link possono essere trascinati. Per gli altri elementi, è necessario impostare l'evento ondragstart nel meccanismo di trascinamento per funzionare correttamente
Esempio che dimostra un paragrafo trascinabile:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Guida di Base(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:400px;height:80px;padding:10px;border:1px solid red;}
</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" draggable="true" ondragstart="drag(event)">Questo è un paragrafo spostabile. Trascina questo paragrafo nella casella rossa in alto.</p>
</body>
</html>Prova a vedere ‹/›IEFirefoxOperaChromeSafari
Internet Explorer 9+, Firefox, Opera, I browser Chrome e Safari supportano l'attributo draggable.
Attenzione: Internet Explorer 8 e versioni precedenti non supportano l'attributo draggable.
L'attributo draggable specifica se un elemento è trascinabile.
Suggerimento:I link e le immagini sono trascinabili di default.
Suggerimento: L'attributo draggable viene utilizzato solitamente nelle operazioni di trascinamento e rilascio.
L'attributo draggable è stato aggiunto in HTML5.
<elemento draggable="true|false|auto">
| Valore | Descrizione |
|---|---|
| true | Definisce che l'elemento è trascinabile. |
| false | Definisce che l'elemento non è trascinabile. |
| auto | Utilizza le funzionalità predefinite del browser. |