Implementation method of Html5 drag and drop

今天写一下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

拖拽元素事件具体代码：

目标元素事件具体代码：

	charset="UTF-8">
	draggable=" true">
	##
< ;/html>

	charset="UTF-8">
	id=" div1"draggable="true">
	id=" div2">
	##
解决火狐浏览器的拖放问题具体代码： ## charset="UTF-8"> draggable="true">1 draggable="true">2 draggable="true">3

The above is the detailed content of Implementation method of Html5 drag and drop. For more information, please follow other related articles on the PHP Chinese website!