Html5如何实现拖放

本篇文章给大家分享的是有关Html5如何实现拖放，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、雅安服务器托管、营销软件、网站建设、齐河网站维护、网站推广。

今天写一下html5的拖放问题。

设置元素可以拖放

   设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

拖拽元素事件

   ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

  ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素触发

ondrop：在目标元素释放鼠标触发

事件的执行顺序

  1、drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

2、drop触发的时候（dragover的时候阻止默认事件）

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的问题

  必须设置 dataTransfer对象才可以拖拽图片外的其他标签

setData（）：设置数据key和value（必须是字符串）

getData（）：获取数据，根据key值，获取相应的value

offctAllowed：设置光标样式

setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

目标元素事件具体代码：

解决火狐浏览器的拖放问题具体代码：

以上就是Html5如何实现拖放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。