HTML draggable 属性是全局属性，用于指定元素是否可以用鼠标拖动。
如果未设置此属性，则其值为 auto，这意味着拖动行为是默认的浏览器行为。默认情况下，只有链接和图像是可拖动的。对于其他元素，我们不得不使用 draggable 属性，而 draggable 属性经常在拖拽操作中使用。
语法
<element draggable = "true | false" >
值可以是 true 或 false
- true ：元素可以拖动。
- false：不能拖动元素。
适用于
draggable 属性可以应用于任何 HTML 元素，使其可拖动。但是，有些元素通常不支持拖动或不适合拖动。例如，表单元素如 <input>、<button>、表格元素如 <th>、<td>、结构元素如 <head>、<title> 等不支持 draggable 属性。
HTML draggable 属性示例
以下示例将说明 HTML draggable 属性，我们应该在何处以及如何使用此属性！
使段落可拖动
在下面的示例中，我们正在 HTML 中创建一个段落元素并使其可拖动。
<!DOCTYPE html>
<html>
<head>
<style>
.drag {
border: 2px solid #000;
border-radius: 8px;
padding: 10px;
background-color: #f9f9f9;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
cursor: grab;
}
.drag:active {
background-color: #e0e0e0;
transform: scale(1.05);
cursor: grabbing;
}
</style>
</head>
<body>
<p class="drag" draggable="true">
This is a draggable paragraph.
You can drag this to any where you wanted.
</p>
</body>
</html>
拖放段落元素
再举一个例子，这里我们创建一个可拖动的段落元素，可以拖拽到指定的矩形 div 容器中，使用事件侦听器和函数来处理拖放操作。
<!DOCTYPE html>
<html>
<head>
<style>
#div {
width: 90%;
height: 100px;
padding: 12px;
border: 2px solid gray;
}
.drag {
border: 2px solid #000;
border-radius: 8px;
padding: 10px;
background-color: #f9f9f9;
color: #333;
font-family: Arial, sans-serif;
font-size: 16px;
cursor: grab;
}
.drag:active {
background-color: #e0e0e0;
transform: scale(1.05);
cursor: grabbing;
}
</style>
</head>
<body>
<div id="div"
ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<br>
<p id="drag"
class="drag"
draggable="true"
ondragstart="drag(event)">
This is a draggable paragraph.
Drag this element into the rectangle box.
</p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
let data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
