本文摘自PHP中文网,作者黄舟,侵删。
其实HTML5就是新增一些有用的API让我们更轻松的开发
从而把更多精力都放在业务逻辑上来
这些API的使用也非常简单
不过我的记性不太好
所以还是以博客的形式记录下来(手动滑稽)
今天就来写一下这个拖拽API
默认拖拽
说起拖放,其实最早实现拖放功能的还是IE(IE4)
H5就是在IE实例的基础上指定的拖拽规范
在浏览器中,是有默认拖拽的
比如说图片的拖拽
选中文本的拖拽
链接的拖拽
元素拖拽
浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性
1 |
|
当拖拽这个元素的时候,浏览器就会以半透明复本的方式显示
拖拽事件
拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件
1 |
|
1 |
|
拖拽元素
拖拽元素的时候,被拖拽元素会触发以下事件
dragstart
drag
dragend
当鼠标点中元素并且开始移动时,就会触发dragstart事件(类比mousedown)
拖拽过程中会持续不断地触发drag事件(类比mousemove)
松开鼠标取消拖拽时就会触发dragend事件(类比mouseup)
1 2 3 4 5 6 7 |
|
目标元素
当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件
dragenter
dragover
dragleave
drop
拖拽元素到目标上,就会触发dragenter事件(类比mouseover)
当拖动元素在目标元素中,就会持续触发dragover事件
离开目标元素,触发dragleave事件(类比mouseout)
若拖放元素到了目标元素中(在目标元素中松开鼠标),就会触发drop事件而不会触发dragleave事件
相关阅读 >>
HTML5/css3 网页加载进度条的实现,下载进度条等经典案例
HTML5中在用户可以开始播放视频/音频时触发的事件oncanplay
HTML5 datalist标签的用法是什么?这里有datalist标签的用法实例
更多相关阅读请进入《HTML5》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者