HTML5拖放事件
HTML拖放使用 DOM事件模型 和 拖动事件 从 鼠标事件继承。一个典型的拖动操作开始，当用户选择用鼠标拖动 元素移动到 空元素，然后释放鼠标。在播放过程中，几种事件类型被处理，一些事件类型可能会被处理很多次（例如 拖 和 DragOver事件类型）。所有的 拖动事件类型 有相关 全局事件处理程序。每个拖动事件类型和拖动全局属性都有一个引用文档来描述事件。下表提供事件类型的简短说明和指向引用文档的链接
| 事件 | 事件处理 | 描述 |
| drag | ondrag | 当元素或文本选择被拖动时被触发 |
| dragend | ondragend | 在拖动操作结束时（例如，释放鼠标按钮或单击转义键）引发 |
| dragenter | ondragenter | 拖动元素或文本选择进入一个有效的拖放目标 |
| dragexit | ondragexit | 当元素不再是拖动操作的立即选择目标时触发 |
| dragleave | ondragleave | 当拖动的元素或文本选择离开有效的拖放目标时触发 |
| dragover | ondragover | 当一个元素或文本选择被拖放在一个有效的拖放目标（每几百毫秒） |
| dragstart | ondragstart | 当用户开始拖动元素或文本选择时引发。（见 开始拖动操作。） |
| drop | ondrop | 在有效的拖放目标上删除元素或文本选择时引发 |
注意，：当拖动文件到浏览器的操作时拖曳开始 和 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() 方法访问一个拖动项目的数据。
以上就是青锋建站给大家分享的HTML5 Drag and Drop拖放事件和接口详解，青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/draganddrop.html
