H5拖放技术有哪些语法

这篇“H5拖放技术有哪些语法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“H5拖放技术有哪些语法”文章吧。
　　提到拖拽，我们都很熟悉，那么拖放呢？一字之差，代表的意义是不一样的，拖拽就是拉着走，拖放就是有拖，有放，我们都知道原生 JS 拖拽效果的缺点：
　　1. 代码相对复杂与冗余
　　2. 仅限于在浏览器内的元素间拖放
　　3、不能实现跨页面的拖放
　　所以H5就出现了拖放技术，与 JS 原生相比 HTML5 拖放的优势：
　　H5拖放技术，drag&drop，对于浏览器的支持性：
　　Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注：在 Safari 5.1.2 中不支持拖放。
　　那么它有哪些api语法，我们来看一下：
　　1、draggable 属性
　　通过 draggable 告诉浏览器哪些元素需要实现拖拽功能。有三个可选值：
　　true： 元素可以被拖拽
　　false：元素不能被拖拽
　　auto：浏览器自己判断元素是否能被拖拽 ( 默认 )
　　2、对象拖放事件
　　dragstart：按下鼠标键并开始移动时触发
　　drag：在元素拖拽过程中持续触发—-相似与mousemove
　　dragend：元素拖拽停止时触发
　　3、投放区事件流程
　　元素被拖动到有效的放置目标时，下列事件会依次发生：
　　1). dragenter：当拖拽对象进入投放区时触发
　　2). dragover ：拖拽对象在投放区内移动时持续触发
　　3). dragleave：元素被拖出了投放区时触发
　　4). drop：拖拽对象投放在投放区时触发
　　虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，需要重写事件的默认行为，例如:
　　在ondragover中一定要执行 preventDefault()否则ondrop事件不会被触发
　　4、dataTransfer 对象–常用方法
　　setDragImage (图标，图标距指针X轴偏移值，Y轴偏移值 )
　　指定一个图标，当拖动发生时，显示在光标下方
　　5、dataTransfer 对象–常用属性：
　　dropEffect 表示被拖动的元素能够执行哪种放置行为
　　可能的值：
　　“none” : 不能把拖动的元素放在这里
　　“move”: 把拖动的元素移动到放置目标
　　“copy”: 把拖动的元素复制到放置目标
　　“link”: 放置目标会打开拖动的元素(有URL)
　　effectAllowed 允许拖动元素的哪种dropEffect
　　允许值：
　　“copyLink” : 允许值为 copy 和 link 的 dropEffect
　　“copyMove”: 允许值为 copy 和 move 的 dropEffect
　　“linkMove” : 允许值为 link和 move 的 dropEffect
　　“all” : 允许任意的 dropEffect
　　注意：dropEffect属性搭配effectAllowed属性使用在dragstart事件处理程序中设置effectAllowed属性在dragover事件处理程序中设置dropEffect属性dropEffect 的每个可能值都会导致免费云主机域名光标显示为不同的符号
　　6、files文件
　　dataTransfer.files：如果是拖放文件，则返回正在拖放的文件列表FileList
　　FileReader：专门用于读取文件，FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型
　　FileReader.readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
　　FileReader.事件：当读取文件成功完成的时候触发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回格式的图片数据。以上就是关于“H5拖放技术有哪些语法”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。

相关推荐: Mybatis游标查询大量数据的方法是什么

这篇文章主要讲解了“Mybatis游标查询大量数据的方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Mybatis游标查询大量数据的方法是什么”吧！对大量数据进行处理时，为防止内存泄漏情况发生，所以采用…