HTML5 教程第13节：拖放 API（Drag & Drop）

第13节：拖放 API（Drag & Drop）

一、简介

HTML5 提供了 原生的拖放 API（Drag and Drop API），允许开发者实现元素之间的拖拽交互，如文件上传、卡片排序、组件拖拽布局等。

拖放功能的核心是通过一组事件和 DataTransfer 对象来控制拖动行为和数据传输。

二、基本概念

1. 拖放流程

一个完整的拖放操作通常包括以下几个步骤：

• 开始拖动（dragstart）
• 拖动中（drag、dragover、dragenter、dragleave）
• 放置目标（drop）
• 结束拖动（dragend）

2. 可拖动元素

默认情况下，只有链接 (<a>) 和图片 (<img>) 是可拖动的。要使其他元素可拖动，需设置属性：

<div draggable="true">可拖动的 DIV</div>

三、关键事件与处理

四、DataTransfer 对象

DataTransfer 是拖放事件中的核心对象，用于在拖放源和目标之间传递数据。

常用属性和方法：

示例代码：

// 获取要拖动的元素
const dragElement = document.getElementById('drag');

// 获取放置区域元素
const dropZone = document.getElementById('drop');

// 为拖动元素添加 dragstart 事件监听器
dragElement.addEventListener('dragstart', function(event) {
    // 使用 dataTransfer 对象设置拖动数据
    // 参数1：数据类型，'text/plain' 表示传输纯文本
    // 参数2：要传输的数据
    event.dataTransfer.setData('text/plain', 'Hello, this is dragged text!');
});

// 为放置区域添加 dragover 事件监听器
dropZone.addEventListener('dragover', function(event) {
    // 阻止默认行为，使放置操作可以触发
    // 默认情况下，浏览器不允许在元素上放置拖动数据
    event.preventDefault();
});

// 为放置区域添加 drop 事件监听器
dropZone.addEventListener('drop', function(event) {
    // 阻止默认行为
    event.preventDefault();

    // 使用 dataTransfer 对象获取拖动数据
    // 参数：数据类型，与 setData 中使用的类型一致
    const data = event.dataTransfer.getData('text/plain');

    // 输出接收到的数据到控制台
    console.log('接收到的数据:', data);
});

五、文件拖放上传

HTML5 允许用户将本地文件从桌面拖入浏览器，并使用 File API 进行读取和上传。

使用 DataTransfer 获取文件：

// 获取放置区域的元素
const dropZone = document.getElementById('fileDrop');

// 为放置区域添加 dragover 事件监听器
dropZone.addEventListener('dragover', function(event) {
    // 阻止默认行为，使放置操作可以触发
    // 默认情况下，浏览器不允许在元素上放置拖动数据
    event.preventDefault();
});

// 为放置区域添加 drop 事件监听器
dropZone.addEventListener('drop', function(event) {
    // 阻止默认行为
    event.preventDefault();

    // 获取拖放的文件列表
    const files = event.dataTransfer.files;

    // 遍历文件列表
    for (let i = 0; i < files.length; i++) {
        // 输出文件名
        console.log('文件名:', files[i].name);

        // 输出文件大小（以字节为单位）
        console.log('文件大小:', files[i].size);
    }

    // 创建一个 FileReader 对象，用于读取文件内容
    const reader = new FileReader();

    // 设置读取完成时的回调函数
    reader.onload = function(e) {
        // 输出文件内容
        console.log('文件内容:', e.target.result);
    };

    // 以文本形式读取第一个文件的内容
    reader.readAsText(files[0]);
});

文件上传示例（使用 Ajax）：

const formData = new FormData();
formData.append('file', files[0]);

fetch('/upload', {
    method: 'POST',
    body: formData
}).then(response => response.json())
  .then(data => console.log('上传成功:', data))
  .catch(error => console.error('上传失败:', error));

六、拖放排序组件实现（Sortable）

可以使用 HTML5 拖放 API 实现一个简单的可排序列表组件。

HTML 结构：

<ul id="sortableList">
    <li draggable="true">Item 1</li>
    <li draggable="true">Item 2</li>
    <li draggable="true">Item 3</li>
</ul>

JavaScript 实现：

// 获取可排序列表的父元素
const list = document.getElementById('sortableList');

// 初始化一个变量，用于存储当前被拖动的元素
let draggedItem = null;

// 为列表中的每个<li>元素添加事件监听器
list.querySelectorAll('li').forEach(item => {
    // 添加 dragstart 事件监听器
    item.addEventListener('dragstart', function() {
        // 将当前被拖动的元素赋值给 draggedItem
        draggedItem = this;

        // 使用 setTimeout 确保在拖动开始时隐藏原位置的元素
        // 设置延迟为 0 毫秒，确保在拖动开始后立即执行
        setTimeout(() => {
            this.style.display = 'none'; // 隐藏原位置元素
        }, 0);
    });

    // 添加 dragover 事件监听器
    item.addEventListener('dragover', function(e) {
        // 阻止默认行为，使放置操作可以触发
        e.preventDefault();
    });

    // 添加 dragenter 事件监听器
    item.addEventListener('dragenter', function(e) {
        // 阻止默认行为
        e.preventDefault();

        // 设置当前元素的背景颜色，表示可以放置
        this.style.background = '#f0f0f0';
    });

    // 添加 dragleave 事件监听器
    item.addEventListener('dragleave', function() {
        // 移除当前元素的背景颜色，表示不能放置
        this.style.background = '';
    });

    // 添加 drop 事件监听器
    item.addEventListener('drop', function() {
        // 检查被拖动的元素是否不是当前元素
        if (draggedItem !== this) {
            // 将被拖动的元素插入到当前元素之前
            list.insertBefore(draggedItem, this);
        }

        // 移除当前元素的背景颜色
        this.style.background = '';
    });

    // 添加 dragend 事件监听器
    item.addEventListener('dragend', function() {
        // 恢复被拖动元素的显示状态
        this.style.display = '';
    });
});

七、兼容性与注意事项

1. 浏览器支持

现代浏览器（Chrome、Firefox、Edge、Safari）均支持 HTML5 拖放 API。

2. 注意事项

• 必须在 dragover 中调用 event.preventDefault() 才能触发 drop。
• 不同浏览器对 DataTransfer.types 的支持略有差异。
• 拖放过程中应避免频繁重绘或性能消耗高的操作。
• 在移动端，建议结合触摸库（如 Touch Punch）实现拖放功能。

八、总结

本节我们深入学习了 HTML5 的拖放 API，包括：

• 拖放事件的生命周期与作用
• DataTransfer 对象的使用
• 文件拖放上传的实现方式
• 拖放排序组件的开发思路

掌握这些内容后，你可以实现丰富的用户交互功能，如文件管理、可视化编辑、仪表盘拖拽布局等。

以下是围绕 HTML5 拖放 API（Drag and Drop API） 的 10 大高频面试题，涵盖基础概念、事件机制、DataTransfer 对象、使用场景和注意事项等核心内容：

✅1. HTML5 中的拖放 API 支持哪些主要事件？它们的触发顺序是怎样的？

主要事件：

典型触发顺序：

1. dragstart
2. drag
3. dragenter
4. dragover
5. dragleave 或再次 dragenter
6. drop
7. dragend

✅2. 如何让一个 HTML 元素可以被拖动？

默认只有 <img> 和 <a> 可以被拖动。要让其他元素可拖动，需设置属性：

<div draggable="true">可拖动的 DIV</div>

✅3. 为什么在 dragover 事件中必须调用 event.preventDefault()？

如果不阻止默认行为，浏览器会阻止后续的 drop 事件。

element.addEventListener('dragover', function(event) {
    event.preventDefault(); // 必须调用，才能允许 drop
});

✅4. DataTransfer 对象的作用是什么？有哪些常用方法和属性？

作用： 用于在拖放源和目标之间传递数据。

常用方法/属性：

✅5. 如何实现文件拖放上传功能？

通过 DataTransfer.files 获取拖入的本地文件，并结合 FileReader 或 FormData 进行读取或上传：

const dropZone = document.getElementById('dropZone');

dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const files = e.dataTransfer.files;
    for (let file of files) {
        console.log(file.name, file.size);
        // 使用 FileReader 读取文件内容
        const reader = new FileReader();
        reader.onload = function(e) {
            console.log('文件内容:', e.target.result);
        };
        reader.readAsText(file);
    }
});

✅6. dragstart 和 dragend 事件通常用来做什么？

• dragstart：初始化拖放操作，设置拖动数据（如文本、URL、自定义对象）
• dragend：清理资源、更新 UI 状态（如隐藏拖动元素）

示例：

element.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', '拖动的数据');
});

element.addEventListener('dragend', function() {
    this.style.opacity = '1'; // 恢复透明度
});

✅7. 如何实现一个简单的拖拽排序组件？

思路：记录拖动元素，在目标位置插入

const list = document.getElementById('sortableList');
let draggedItem = null;

list.querySelectorAll('li').forEach(item => {
    item.addEventListener('dragstart', () => {
        draggedItem = item;
        setTimeout(() => item.style.display = 'none', 0);
    });

    item.addEventListener('dragover', e => e.preventDefault());
    item.addEventListener('dragenter', e => e.preventDefault());

    item.addEventListener('drop', function() {
        if (this !== draggedItem) {
            list.insertBefore(draggedItem, this);
        }
    });

    item.addEventListener('dragend', () => item.style.display = '');
});

✅8. dropEffect 和 effectAllowed 的区别是什么？

• effectAllowed：设置拖动源允许的操作（copy / move / link / none）
• dropEffect：设置目标希望执行的操作（copy / move / link）

两者需要匹配才能完成拖放操作。

✅9. 拖放 API 在移动端是否支持？需要注意什么？

• 移动端浏览器（如 Chrome Android、Safari iOS）部分支持原生拖放 API。
• 但触摸交互体验不佳，建议使用第三方库（如 Sortable.js 或 interact.js）增强兼容性。
• 注意处理触摸事件与拖放事件的绑定逻辑。

✅10. 拖放 API 的优缺点是什么？适合哪些应用场景？

优点：

• 原生支持，无需依赖第三方库
• 提供完整的事件体系控制拖放流程
• 可用于文件上传、可视化编辑、卡片排序等场景

缺点：

• 移动端兼容性差
• 样式和交互需自行实现
• 不支持拖拽多个元素同时操作

常见应用场景：

• 文件上传（拖入上传）
• 表单控件布局（拖拽调整顺序）
• 看板系统（Trello 类应用）
• 图形化编辑器（拖拽组件）

总结

这 10 道面试题涵盖了 HTML5 拖放 API 的核心知识点，包括事件机制、DataTransfer、文件拖放上传、排序组件实现、移动端适配等。掌握这些内容，有助于你在实际开发中灵活运用拖放功能，并应对前端技术面试中的相关问题。