【HTML】draggable 属性：解锁网页交互新维度

一、简介

在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> 可拖动

html 复制代码

<div draggable="true" style="width: 100px; height: 100px; background: lightblue;">
  拖动我！
</div>

禁止图片拖动（覆盖默认行为）

html 复制代码

<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：示例代码

html 复制代码

<!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）