UD5工具箱
技术术语与概念词典
在使用 DataTransfer 对象构建器的过程中，您会接触到大量与浏览器拖放 API 相关的技术术语。以下术语表对这些概念进行了全面而系统的梳理，帮助您建立扎实的技术知识基础。
DataTransfer 对象
DataTransfer 对象是浏览器拖放 API 的核心数据容器，负责在拖放操作的各个阶段承载和传递数据。该对象由浏览器在 dragstart 事件触发时自动创建，并在整个拖放生命周期中持续存在。DataTransfer 对象内部维护了一个数据存储区域，以 MIME 类型为键来组织不同类型的数据。开发者可以通过 setData() 方法向存储区域写入数据，通过 getData() 方法读取数据，通过 types 属性查看所有已存储数据的 MIME 类型列表，通过 clearData() 方法清除特定类型或所有类型的数据。此外，DataTransfer 对象还管理着拖拽效果（effectAllowed 和 dropEffect）、文件列表（files）等重要属性。在本工具中，DataTransfer 对象通过 new DataTransfer() 构造函数创建，使用户能够在脱离实际拖放交互的环境下自由地配置和测试该对象。
setData() 方法
setData() 是 DataTransfer 对象上的一个核心方法，用于向对象的数据存储区域写入指定类型的数据。该方法接受两个参数：第一个参数是数据的 MIME 类型字符串（如 "text/plain"、"text/html" 等），第二个参数是与该类型对应的数据内容字符串。如果指定的 MIME 类型已经存在于数据存储中，新的数据内容会覆盖旧的内容。setData() 方法只能在 dragstart 和 drop 事件的处理函数中调用（对于浏览器原生的 DataTransfer 对象），在其他事件阶段调用会抛出异常。然而在本工具中，由于使用的是自定义的 DataTransfer 模拟实现，用户可以在任何时候自由调用 setData() 方法而不会受到限制。
getData() 方法
getData() 是 DataTransfer 对象上的一个方法，用于从数据存储区域读取指定类型的数据内容。该方法接受一个参数，即要读取的数据的 MIME 类型字符串。如果存储区域中存在该类型的数据，方法返回对应的数据内容字符串；如果不存在，则返回空字符串。getData() 方法可以在 drop 事件处理函数中调用以获取拖拽数据，也可以在 dragover 等其他事件阶段中调用以预览数据内容（但某些浏览器可能对非 drop 事件中的 getData() 调用有限制）。在使用 getData() 时，需要注意返回的数据始终是字符串格式，即使存储的是 JSON 或二进制数据，也需要在读取后进行相应的解析处理。
MIME 类型
MIME 类型（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展类型）是一种标准化的数据格式标识系统，用于标识互联网上传输的数据的性质和格式。在 DataTransfer 对象中，MIME 类型用作数据存储的键，将不同类型的数据进行分类组织。常见的 MIME 类型包括：text/plain 表示纯文本数据；text/html 表示 HTML 格式的数据；text/uri-list 表示 URL 列表数据；application/json 表示 JSON 格式的数据；application/xml 表示 XML 格式的数据；image/png 表示 PNG 格式的图片数据。除了标准的 MIME 类型外，开发者还可以使用自定义的类型字符串（建议以 application/ 开头命名），用于传输特定应用的数据。MIME 类型的正确使用确保了拖拽数据在源元素和目标元素之间能够被正确地解析和处理。
effectAllowed 属性
effectAllowed 是 DataTransfer 对象上的一个属性，用于设置拖拽操作允许使用的效果类型。该属性只能在 dragstart 事件处理函数中设置，其值决定了在后续的拖拽过程中浏览器可以使用哪些拖拽效果。该属性接受以下标准值：copy 表示允许创建数据副本；move 表示允许将数据移动到目标位置；link 表示允许创建指向源数据的链接；copyMove 表示同时允许复制和移动；copyLink 表示同时允许复制和创建链接；linkMove 表示同时允许创建链接和移动；all 表示允许所有效果类型；none 表示不允许任何效果（默认值）。effectAllowed 属性的设置会直接影响浏览器在拖拽过程中显示的光标样式，帮助用户了解当前允许的拖拽行为。
dropEffect 属性
dropEffect 是 DataTransfer 对象上的一个属性，用于获取或设置当前拖拽操作的实际执行效果。该属性通常在 dragenter 和 dragover 事件处理函数中设置，其值应为 effectAllowed 属性所允许的效果之一。dropEffect 的值决定了当用户在目标元素上释放鼠标时将执行的操作类型：copy 表示将创建拖拽数据的副本；move 表示将把数据从源位置移动到目标位置；link 表示将创建指向拖拽数据的链接；none 表示不允许在当前目标上放下数据。dropEffect 的值还会影响鼠标光标的样式：copy 显示加号光标，move 显示移动箭头光标，link 显示链接光标，none 显示禁止光标。在 drop 事件处理函数中，开发者可以通过读取 dropEffect 属性来确定应该执行哪种操作。
dragstart 事件
dragstart 事件在用户开始拖拽一个被标记为可拖拽的元素时触发，是拖放生命周期中的第一个事件。该事件在源元素上触发，事件对象中包含一个 DataTransfer 对象引用（通过 event.dataTransfer 访问），开发者可以在该事件的处理函数中通过 setData() 方法设置要拖拽的数据以及通过设置 effectAllowed 属性来指定允许的拖拽效果。在 dragstart 事件处理函数中，通常还会设置拖拽图像（通过 setDragImage() 方法）或修改拖拽过程中的视觉表示。一旦 dragstart 事件处理函数执行完毕，浏览器就会开始实际的拖拽操作，鼠标光标会根据 effectAllowed 的值切换为对应的拖拽效果图标。
dragover 事件
dragover 事件在被拖拽的元素经过一个可接受拖拽数据的目标元素上方时持续触发。该事件的触发频率非常高，大约每 350 毫秒触发一次。在 dragover 事件处理函数中，开发者通常需要做两件事：第一，调用 event.preventDefault() 方法来阻止浏览器的默认行为（即不允许放下数据），这是允许目标元素接受拖拽数据的必要步骤。第二，设置 event.dataTransfer.dropEffect 属性来指定实际的拖放效果。如果 dragover 事件处理函数没有调用 preventDefault()，浏览器会显示禁止光标，表示不允许在该元素上放下数据。因此，dragover 事件的处理逻辑直接决定了哪些元素可以作为拖拽的目标区域。
drop 事件
drop 事件在用户在有效的目标元素上释放鼠标按钮时触发，是拖放生命周期中最关键的事件之一。该事件仅在目标元素的 dragover 事件处理函数调用了 preventDefault() 的情况下才会触发。在 drop 事件处理函数中，开发者可以通过 event.dataTransfer.getData() 方法获取拖拽的数据内容，然后根据数据执行相应的业务逻辑。同时，开发者还可以通过读取 event.dataTransfer.dropEffect 属性来确定实际执行的拖拽效果。drop 事件是唯一可以安全地调用 getData() 来读取完整拖拽数据的事件阶段。在处理完 drop 事件后，拖放操作即告完成。
拖拽光标
拖拽光标是浏览器在拖拽操作过程中显示的特殊鼠标光标样式，用于向用户指示当前的拖拽效果类型。不同的拖拽效果对应不同的光标外观：copy 效果显示一个带有加号的光标，表示将创建副本；move 效果显示一个带有实心箭头的光标，表示将移动数据；link 效果显示一个带有链接图标的光标，表示将创建链接；none 效果显示一个带有禁止符号的光标，表示不允许放下数据。拖拽光标的样式由浏览器自动管理，开发者无法直接自定义光标的图形，但可以通过设置 effectAllowed 和 dropEffect 属性来间接影响光标的显示。拖拽光标是用户界面反馈的重要组成部分，它帮助用户在拖拽过程中了解预期的操作结果。