编辑“︁JavaScript拖放API”︁（章节）

= JavaScript拖放API =

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

== 核心概念 ==
拖放操作分为两个主要角色：
* '''可拖动元素'''（draggable）：通过设置<code>draggable="true"</code>属性标记
* '''放置目标'''（drop zone）：通过监听特定事件实现

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

<mermaid>
sequenceDiagram
    participant 拖动元素
    participant 放置目标
    拖动元素->>拖动元素: dragstart
    拖动元素->>放置目标: dragenter
    放置目标->>放置目标: dragover
    放置目标->>放置目标: dragleave (可选)
    拖动元素->>放置目标: drop
    拖动元素->>拖动元素: dragend
</mermaid>

== 基础实现 ==
=== 使元素可拖动 ===
<syntaxhighlight lang="html">
<div id="dragItem" draggable="true">拖我</div>
</syntaxhighlight>

=== 基本事件处理 ===
<syntaxhighlight lang="javascript">
// 拖动元素的事件监听
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));
});
</syntaxhighlight>

== 高级功能 ==
=== 数据传输对象 ===
<code>DataTransfer</code>对象提供以下常用方法：
* <code>setData(format, data)</code>：设置拖拽数据
* <code>getData(format)</code>：获取拖拽数据
* <code>setDragImage(element, x, y)</code>：自定义拖拽预览图

=== 拖拽效果控制 ===
通过<code>dataTransfer.effectAllowed</code>和<code>e.dropEffect</code>指定允许的操作类型：
* <code>copy</code>：复制操作
* <code>move</code>：移动操作
* <code>link</code>：链接操作
* <code>none</code>：禁止操作

<syntaxhighlight lang="javascript">
// 在dragstart事件中设置
e.dataTransfer.effectAllowed = 'copyMove';

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

== 实际案例 ==
=== 文件上传区域 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== 可排序列表 ===
<mermaid>
graph TD
    A[监听dragstart] --> B[存储被拖动项索引]
    C[监听dragover] --> D[计算新位置]
    E[监听drop] --> F[重新排序DOM元素]
</mermaid>

== 浏览器兼容性 ==
大多数现代浏览器完全支持拖放API，但需要注意：
* 移动端支持有限
* IE9+支持基本功能
* 文件拖放需要检测<code>dataTransfer.files</code>

== 最佳实践 ==
1. 始终在<code>dragover</code>事件中调用<code>preventDefault()</code>
2. 为拖拽元素添加视觉反馈
3. 考虑无障碍访问（ARIA属性）
4. 复杂场景下使用第三方库（如SortableJS）

== 数学表示 ==
拖拽位置计算可使用以下公式确定相对位置：
<math>
\Delta x = x_{drop} - x_{dragstart}
</math>
<math>
\Delta y = y_{drop} - y_{dragstart}
</math>

== 常见问题 ==
'''Q: 为什么我的drop事件不触发？'''
A: 确保在<code>dragover</code>事件中调用了<code>preventDefault()</code>

'''Q: 如何限制只能拖拽特定类型的元素？'''
A: 检查<code>dataTransfer.types</code>或使用自定义数据属性

'''Q: 移动端如何实现类似功能？'''
A: 建议使用触摸事件（touchstart/touchmove）配合拖放API的polyfill

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript BOM]]