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!