Html5拖放的實作方法
- PHP中文网原創
- 2017-06-20 13:33:581574瀏覽
今天写一下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"> |
|||||||||||||||||||||||||||||||
| # ############### ######################################################################################## ##### ############### ######### ########################################################################## #### ###### ############ 解决火狐浏览器的拖放问题具体代码：
|