一、简介
- 在Web开发中，用户与内容的交互方式直接影响用户体验的深度。
- 在 HTML 中，
draggable是一个全局属性，通过简单配置即可让任意元素实现拖拽功能。- 也可通过结合
draggable属性和 JavaScript 事件，可以实现丰富的拖放交互功能。- 为构建可视化编辑器、任务看板、工作流拖拽等场景提供了原生支持。
- 本文将系统解析该属性的使用方法、事件机制及 dataTransfer 实现跨元素数据交互等要点。
二、基本语法
draggable它是一个布尔属性，可以设置为true或false，默认值为false（除非元素是默认可拖动的，如<img>或<a>标签）。
<element draggable="true|false|auto">
属性值与作用范围
draggable作为全局布尔属性，支持三种取值：
true：强制启用拖拽（如<div draggable="true">）false：禁用拖拽（覆盖默认行为）auto（默认）：遵循浏览器规则（链接/图片默认可拖拽）
特殊说明：
- 表单控件（
<input>/<button>）和表格结构元素（<th>/<td>）默认不支持拖拽 - 文本选中状态下拖拽会触发系统默认的文本复制行为
- 移动端需配合触摸事件或第三方库（如interact.js）实现兼容
eg：示例代码
1.使 <div> 可拖动
<div draggable="true" style="width: 100px; height: 100px; background: lightblue;">
拖动我！
</div>
- 禁止图片拖动（覆盖默认行为）
<img src="example.jpg" draggable="false" alt="不可拖动的图片">
三、拖拽事件生命周期
要实现完整的拖放功能，需要结合 JavaScript 监听拖放相关事件：
完整的拖拽操作涉及7个关键事件，按触发顺序如下：
| 事件类型 | 触发场景 | 典型用途 |
|---|---|---|
dragstart |
用户开始拖拽元素时 | 设置拖拽数据、预览样式 |
drag |
拖拽过程中持续触发（每350ms） | 实时反馈位置（需节流处理） |
dragend |
拖拽结束时（无论成功/取消） | 清理临时状态 |
dragenter |
拖拽元素进入放置区域时 | 高亮显示放置区域 |
dragover |
拖拽元素在放置区域内移动时 | 必须调用preventDefault() |
dragleave |
拖拽元素离开放置区域时 | 恢复放置区域样式 |
drop |
元素在放置区域释放时 | 处理业务逻辑 |
四、数据传递
通过 dataTransfer 对象在拖放事件中传递数据
dataTransfer对象是 HTML5 拖放 API 的核心部分。- 它允许在拖放操作期间在不同元素之间传递数据。
- 通过
setData()方法设置数据，通过getData()方法获取数据 - 实现步骤
- 在
dragstart事件中，使用setData()设置要传递的数据- 在
drop事件中，使用getData()获取之前设置的数据
eg：示例代码
<!DOCTYPE html>
<html>
<head>
<title>拖放数据传递示例</title>
<style>
#dragItem {
width: 100px;
height: 50px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 50px;
cursor: move;
margin: 20px;
}
#dropZone {
width: 300px;
height: 200px;
border: 2px dashed #7f8c8d;
background-color: #ecf0f1;
text-align: center;
line-height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div id="dragItem" draggable="true">拖我</div>
<div id="dropZone">放到这里</div>
<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');
/**
* dragItem 元素处理拖动开始事件
* 1. 设置数据，第一个参数是数据格式，第二个参数是数据内容
*/
dragItem.addEventListener('dragstart', function (e) {
console.log('开始拖动，设置数据');
// 设置数据，第一个参数是数据格式，第二个参数是数据内容
e.dataTransfer.setData('text/plain', '这是通过dataTransfer传递的消息');
e.dataTransfer.setData('application/json', JSON.stringify({ id: 1, name: '示例对象' }));
});
/**
* dropZone 元素处理拖拽经过放置区事件
* 1. 阻止默认行为以允许放置
*/
dropZone.addEventListener('dragover', function (e) {
e.preventDefault();
});
/**
* dropZone 元素处理放置事件
* 1. 阻止默认行为以允许放置
* 2. 获取之前设置的数据
* 3. 显示接收到的数据
* 4. 改变背景色以示反馈
*/
dropZone.addEventListener('drop', function (e) {
e.preventDefault();
// 获取之前设置的数据，第一个参数是数据格式，第二个参数是数据内容
const textData = e.dataTransfer.getData('text/plain');
const jsonData = e.dataTransfer.getData('application/json');
console.log('获取到的文本数据:', textData);
console.log('获取到的JSON数据:', JSON.parse(jsonData));
dropZone.textContent = `已接收数据: ${textData}`;
dropZone.style.backgroundColor = '#2ecc71';
});
</script>
</body>
</html>
五、注意事项
- 默认可拖动元素：如
<img>、<a>（带href）默认支持拖动，无需设置draggable="true"。 - 移动端兼容性：部分移动设备对拖放支持有限，需测试目标平台。
- 数据传递：通过
dataTransfer对象在拖放事件中传递数据（如示例中的setData/getData）