HTML5 拖放API

简介

拖放（Drag and Drop）是HTML5的重要特性，它允许用户选择一个元素并将其拖动到另一个位置释放。这一功能常用于文件上传、列表排序、看板系统等场景。与传统的依赖第三方库实现拖放不同，HTML5原生提供了完整的拖放API，兼容性良好且性能优异。

基本实现

HTML5拖放API的核心是draggable属性和拖放事件。要使一个元素可拖动，只需设置draggable="true"属性。

<p draggable="true" ondragstart="drag(event)">拖动这段文本</p> 

拖放API涉及多个事件，每个事件都有其特定用途：

• ondragstart - 拖动开始时触发
• ondrag - 拖动过程中持续触发
• ondragend - 拖动结束时触发
• ondragenter - 进入放置区域时触发
• ondragover - 在放置区域上方移动时触发
• ondragleave - 离开放置区域时触发
• ondrop - 放置元素时触发

dataTransfer 对象

拖放事件的事件对象包含一个dataTransfer对象，用于在拖动过程中存储数据。通过setData()方法存储数据，通过getData()方法获取数据。

<script>
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script> 

dataTransfer对象还提供以下常用方法：

• setData(format, data) - 设置拖动数据，format可以是"text"、"text/plain"、"text/html"等
• getData(format) - 获取指定格式的拖动数据
• setDragImage(element, x, y) - 自定义拖动时的鼠标图标
• effectAllowed - 设置允许的拖动效果
• dropEffect - 获取或设置实际的拖动效果

拖动效果

通过设置effectAllowed和dropEffect属性，可以控制拖动时的光标样式和允许的操作。

// effectAllowed: 源元素设置，允许的操作类型

// 只允许复制（拖动时显示复制光标）
function dragStartCopy(ev) {
    ev.dataTransfer.effectAllowed = "copy";
}

// 只允许移动（拖动时显示移动光标）
function dragStartMove(ev) {
    ev.dataTransfer.effectAllowed = "move";
}

// 允许复制或移动（用户可选择）
function dragStartCopyMove(ev) {
    ev.dataTransfer.effectAllowed = "copyMove";
}

// 允许所有操作
function dragStartAll(ev) {
    ev.dataTransfer.effectAllowed = "all";
} 

// dropEffect: 目标元素设置，实际执行的操作

// 放置时执行复制操作
function dragOverCopy(ev) {
    ev.preventDefault();  // 必须阻止默认行为才能放置
    ev.dataTransfer.dropEffect = "copy";
}

// 放置时执行移动操作
function dragOverMove(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
}

// 放置时创建链接
function dragOverLink(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "link";
} 

effectAllowed 属性值（源元素设置）：

• none - 不允许任何操作
• copy - 只允许复制
• move - 只允许移动
• link - 只允许创建链接
• copyMove - 允许复制或移动
• copyLink - 允许复制或创建链接
• linkMove - 允许创建链接或移动
• all - 允许所有操作

dropEffect 属性值（目标元素设置）：

• none - 不允许放置
• copy - 复制
• move - 移动
• link - 创建链接

完整示例

下面是一个完整的拖放示例，实现了从左侧拖动元素到右侧放置区域的功能：

注意事项