H5拖放

拖放技术在HTML5中得到应用，为解决原生JS拖拽的缺点提供了更优选择。拖放技术，drag&drop，相较于原生JS，HTML5拖放技术在浏览器支持性方面具有明显优势。

在浏览器兼容性方面，Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。需要注意的是，Safari 5.1.2 不支持拖放功能。拖放技术主要通过几个关键API实现。

首先，通过 draggable 属性，告知浏览器哪些元素需要实现拖拽功能，该属性有三个可选值：true、false、auto，分别表示元素可以被拖拽、不能被拖拽、由浏览器自行判断。

接下来，对象拖放事件主要包括：dragstart（按下鼠标键并开始移动时触发）、drag（在元素拖拽过程中持续触发）、dragend（元素拖拽停止时触发）。

投放区事件流程包括：dragenter（当拖拽对象进入投放区时触发）、dragover（拖拽对象在投放区内移动时持续触发）、dragleave（元素被拖出了投放区时触发）、drop（拖拽对象投放在投放区时触发）。

对于放置目标事件，所有元素都支持，但默认不允许放置。因此，需要重写事件的默认行为，如在ondragover中执行 preventDefault()，以确保ondrop事件被触发，并使用setDragImage()指定拖动图标。

数据传输对象dataTransfer包含常用属性，如dropEffect（表示被拖动元素的放置行为，如“none”、“move”、“copy”、“link”）、effectAllowed（允许拖动元素的dropEffect，如“copyLink”、“copyMove”、“linkMove”、“all”）。

在dragstart事件中设置effectAllowed属性，dragover事件中设置dropEffect属性。dropEffect的不同值会显示不同的光标符号。

此外，拖放文件操作中，dataTransfer.files返回拖放的文件列表FileList，FileReader接口提供读取文件的方法，如使用FileReader.readAsDataURL读取文件为DataUrl，并在onload事件中通过this.result获取读取结果。

H5拖放技术提供丰富的API，允许开发者自定义拖拽效果和投放事件，实现诸如垃圾桶效果、拖动排序等功能变得简单。通过合理使用这些API，可以构建高效、互动性强的用户界面。