JavaScript拖放API[编辑 | 编辑源代码]

JavaScript拖放API（Drag and Drop API）是浏览器提供的一组接口，允许开发者通过脚本控制元素的拖放行为。它是浏览器对象模型（BOM）的一部分，常用于实现交互式UI功能，如文件上传、排序列表或游戏操作。

核心概念[编辑 | 编辑源代码]

拖放操作分为两个主要角色：

可拖动元素（draggable）：通过设置draggable="true"属性标记
放置目标（drop zone）：通过监听特定事件实现

事件流程[编辑 | 编辑源代码]

拖放过程触发以下事件序列：

基础实现[编辑 | 编辑源代码]

使元素可拖动[编辑 | 编辑源代码]

<div id="dragItem" draggable="true">拖我</div>

基本事件处理[编辑 | 编辑源代码]

// 拖动元素的事件监听
document.getElementById('dragItem').addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
});

// 放置目标的事件监听
const dropZone = document.getElementById('dropArea');
dropZone.addEventListener('dragover', (e) => {
    e.preventDefault(); // 必须阻止默认行为
});

dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    e.target.appendChild(document.getElementById(id));
});

高级功能[编辑 | 编辑源代码]

数据传输对象[编辑 | 编辑源代码]

DataTransfer对象提供以下常用方法：

setData(format, data)：设置拖拽数据
getData(format)：获取拖拽数据
setDragImage(element, x, y)：自定义拖拽预览图

拖拽效果控制[编辑 | 编辑源代码]

通过dataTransfer.effectAllowed和e.dropEffect指定允许的操作类型：

copy：复制操作
move：移动操作
link：链接操作
none：禁止操作

// 在dragstart事件中设置
e.dataTransfer.effectAllowed = 'copyMove';

// 在dragover事件中设置
e.dataTransfer.dropEffect = 'copy';

实际案例[编辑 | 编辑源代码]

文件上传区域[编辑 | 编辑源代码]

<div id="fileDropZone" style="border: 2px dashed #ccc; padding: 20px;">
    拖拽文件到此处上传
</div>

<script>
    const dropZone = document.getElementById('fileDropZone');
    
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.style.borderColor = 'blue';
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        dropZone.style.borderColor = '#ccc';
        
        const files = e.dataTransfer.files;
        console.log('上传的文件:', files);
        // 实际处理文件上传逻辑...
    });
</script>