作者:手机用户2602909207 | 来源:互联网 | 2020-08-08 07:12
今天写一下html5的拖放问题。 设置元素可以拖放 设置元素可以拖放用draggable属性,设置为true。元素就可以拖放了。(注:火狐浏览器不支持) 拖拽元素事件 ondragstart:拖拽前触发 ondrag:拖拽中连续触发&
今天写一下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"> |
| |
| |
| |
| |
| |
目标元素事件具体代码:
| |
| |
| |
| charset="UTF-8"> |
| |
| |
| |
| |
| id="div1" draggable="true"> |
| id="div2"> |
| |
| |
| |
| |
解决火狐浏览器的拖放问题具体代码:
| |
| |
| |
| charset="UTF-8"> |
| |
| |
| |
| |
| |
| draggable="true">1 |
| draggable="true">2 |
| draggable="true">3 |
| |
| |
| |
| |
| |
| |
以上就是Html5拖放的实现方法的详细内容,更多请关注 第一PHP社区 其它相关文章!