HTML5 Drag and Drop拖放事件和接口详解

　　HTML拖放接口使应用程序能够使用拖和放在火狐和其他浏览器。 例如，有了这些功能，用户可以使用鼠标 拖动 元素到另一个空元素中通过释放鼠标按钮。
　　本文档是HTML拖放一个 概述 。它包括对接口的描述、向应用程序添加拖放支持的基本步骤以及接口的互操作性的摘要。

HTML5拖放事件

　　HTML拖放使用 DOM事件模型 和 拖动事件 从 鼠标事件继承。一个典型的拖动操作开始，当用户选择用鼠标拖动 元素移动到 空元素，然后释放鼠标。在播放过程中，几种事件类型被处理，一些事件类型可能会被处理很多次（例如 拖 和  DragOver事件类型）。
　　所有的 拖动事件类型 有相关 全局事件处理程序。每个拖动事件类型和拖动全局属性都有一个引用文档来描述事件。下表提供事件类型的简短说明和指向引用文档的链接

注意，：当拖动文件到浏览器的操作时拖曳开始 和 dragend 事件不会被触发时。

HTML5拖放接口

　　HTML5拖放接口是DataTransfer, DataTransferItem andDataTransferItemList这几个函数。
　　DragEvent 接口有一个构造函数和一个属性，DataTransfer是数据对象。 DataTransfer包括拖动事件的状态，拖动的数据（一个或多个项目）和每个 拖动项目 类型（MIME类型）。 DataTransfer还有方法添加拖动数据和删除拖动项目。 DragEvent 和 datatransfer接口是唯一需要向应用程序添加HTML的拖放功能。然而，注意Firefox支持一些特定的扩展到datatransfer 对象，，但只能在Firefox下可以使用。

　　每个  数据对象包含一个 项目是一种 的 datatransfer对象列表 。每个 datatransfer对象代表 拖动项目 和单的每一项都有一种 属性是数据的 种 （无论是 字符串 或 文件）和一个 型 属性的数据项的类型（即MIME类型）。 datatransfer对象也有方法得到拖放的数据。
　　datatransfer对象列表是 datatransfer对象。该对象可以把拖动项添加到列表中、从列表中移除拖动项、清除所有拖动项的列表。
　　DataTransfer和 datatransfer条目项接口之间的区别是，前者采用同步 getdata() 方法访问一个拖动项目的数据，后者采用异步 getasstring() 方法访问一个拖动项目的数据。

• 上一篇：JavaScript中数组的创建与内部数组
• 下一篇：中小企业网站建设解决方案