关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件

iKcamp 发布于2019-08-26 10:31 / 574人阅读

摘要：在中，拖放是标准的一部分，任何元素都能够拖放。如果需要设置允许放置，我们必须阻止对元素的默认处理方式方法。

系列文章

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

H5拖拽事件(知识点主要来源于HTML 5 拖放)

其实打算出实战代码的，想想好像可以插多一个拖曳扫盲贴，在PC上传文件也经常能用到的，先来看看有关知识点。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先看看兼容性如何

移动端全线飘红我可以理解的，毕竟不是主要应用交互，

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

元素哦

。
里面的事件有

事件	描述
ondragstart	当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter	当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover	拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上（默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 event.preventDefault() 方法。）
ondrop	被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend	当拖拽完成后触发的事件，此事件作用在被拖曳元素上

方法有

方法	作用
setData	设置被拖元素的数据类型和值
getData	返回在 setData() 方法中设置为相同类型的任何数据

实例：

就讲这么多了，接下来你们可以自己发挥想象做出好多好玩的东西了。

云服务器 GPU云服务器服务器扫盲贴 php拖拽上传大文件 h5 js 文件上传 jquery拖拽事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106308.html

关于前端上传文件全面基础扫盲贴(二) ----- File

摘要：为了解救上面说到的问题是向提交的一个草案，旨在推出一套标准的，其基本功能是实现用对本地文件进行操作。出于安全性的考虑，该只对本地文件提供有限的访问。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- For...

scola666 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(零)

摘要：表单用于向服务器传输数据。属性对象的属性指定了一个事件句柄函数。标签的属性应当与相关元素的属性相同。详情查阅请狠狠地点击关于对象代表表单中的一个提交按钮在表单提交之前，触发事件句柄，并且一个句柄可以通过返回来取消表单提交。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) -...

SnaiLiu 2019-08-02 15:42 评论0 收藏0
关于前端上传文件全面基础扫盲贴(四) ----- FileReader

摘要：没有浏览器测试，所以不知道是不是有效，其实里面看起来比我写的那个复杂，实际上多了个检验格式上兼容写法所以不要怕，如果我错了记得提醒下我啊。目前为止其实已经该说的都差不多覆盖到了吧，动手能力强的话已经可以根据教程写一个实例出来的了。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(...

Tony 2019-08-26 10:31 评论0 收藏0
关于前端上传文件全面基础扫盲贴(三) ----- FormData

摘要：如果是传入三个参数的方式，那么该值将是一个布尔值，文件，或者一个，如果不是，将被转成一个字符串可选传给服务器的文件名称一个。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) ----- File关于前端上传文件全面基础扫盲贴(三) ----- FormData关于前端上传文...

developerworks 2019-08-26 10:30 评论0 收藏0