HTML draggable 语法
在 HTML 中，draggable 属性是一个全局属性，它用于定义元素是否可以被拖动。
语法：
<element draggable="取值">内容</element>说明：
draggable 属性的取值有 3 种，如下表所示。
| 属性 | 说明 |
|---|---|
| auto（默认值） | 元素的拖动行为由浏览器决定。比如图像或链接，默认值为 true；而对于其他元素，默认值为 false |
| true | 元素可以被拖动 |
| false | 元素不可被拖动 |
需要注意的是，设置 draggable="true" 只是开启了 “可拖动” 功能。如果你想实现真正的 “拖放效果”（比如拖一个元素到另一个区域），还需要配合 HTML5 拖放 API（如 dragstart、drop 等事件）。
布尔属性 vs 枚举属性
在 HTML 规范中，draggable 属于 “枚举属性 (Enumerated Attribute)”，而不是 “布尔属性 (Boolean Attribute)”。
- 布尔属性：只要该属性出现就生效，比如：<input autofocus>。
- 枚举属性：必须赋值才会生效。比如：<div draggable="true">。
HTML draggable 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML draggable 示例
接下来，我们通过一个简单的例子来讲解一下 HTML draggable 属性是如何使用的。
示例：draggable 属性的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: hotpink;
}
</style>
</head>
<body>
<p draggable="true">拖我试试</p>
<script>
const oP = document.getElementsByTagName("p")[0];
// 开始拖动时，变个颜色
oP.addEventListener("dragstart", function(e) {
this.style.opacity = "0.5";
console.log("开始拖动...");
});
// 拖动结束时，恢复原状
oP.addEventListener("dragend", function(e) {
this.style.opacity = "1.0";
console.log("拖动结束！");
});
</script>
</body>
</html>默认情况下，页面效果如下图 1 所示。当我们拖动元素之后，页面效果如下图 2 所示。
分析：
当我们使用鼠标左键长按时，会发现 p 元素是可以被拖动的。有小伙伴们就会问了：“为什么我松开鼠标左键后，元素位置却没有改变呢？”
其实 draggable="true" 只能定义元素拥有可以被拖动这一行为，拖动后并不会改变元素的位置。如果想要改变元素的位置，需要结合 “HTML5 拖放 API” 才能实现。
