English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The global property draggable is an enumerated type property used to indicate whether an element allows dragging and dropping operations using the Drag and Drop API.
The value of draggable is as follows:
true, indicating that the element can be dragged
false, indicating that the element cannot be dragged
If this property is not set, the default value is auto, indicating that the default behavior defined by the browser is used.
This property is of enumeration type, not boolean type. This means that you must explicitly specify the value as true or false, like <label draggable>Example Label/label> This shorthand is not allowed. The correct usage is <label draggable="true">Example Label/label>.
By default, only selected text, images, and links can be dragged. For other elements, the ondragstart event must be set in the order of the drag mechanism to work properly
Example demonstrates a draggable paragraph:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(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)">This is a draggable paragraph. Please drag this paragraph into the red rectangle above./p>
</body>
</html>Test to see ‹/›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.
The draggable attribute specifies whether an element is draggable.
Tip:Links and images are draggable by default.
Tip: The draggable attribute is commonly used in drag-and-drop operations.
The draggable attribute is a feature of HTML5 Newly added.
<element draggable="true|false|auto">
| Value | Description |
|---|---|
| true | Specifies that the element is draggable. |
| false | Specifies that the element is not draggable. |
| auto | Use the browser's default features. |