HTML5讲解之拖拽事件dragstart、drag和dragend


本文摘自PHP中文网,作者巴扎黑,侵删。

[导读] 拖拽事件  通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:

拖拽事件

  通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:dragstart事件、drag事件和dragend事件。

  按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线),表示不能把元素放在自己上门。拖拽开始时,可以通过ondragstart事件处理程序运行JavaScript代码。

  触发dragstart事件后,随即会触发drag事件,而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标,还是放到了无效的放置目标上),都会发生dragend事件。

  上面说的三个事件的目标都是被拖动的元素触发。默认情况下,浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候,会触发的事件有:dragenter事件、dragover事件和dragleave或者drop事件。

  只要有元素被拖动到放置目标上,就会触发dragenter事件(类似于mouseover事件)。紧随其后的是dragover事件,而且在被拖动的元素还在放置目标的范围内移动是,会连续触发dragover事件。如果元素被拖出放置目标,dragover事件不再发生,但是会触发dragleave事件(类似于mouseout事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。

  自定义放置目标

阅读剩余部分

相关阅读 >>

html5 canvas中绘制字体与图片以及图形模糊问题解决

html5的存储方式sessionstorage和localstorage详解

详细介绍html5 canvas基本绘图之绘制线段代码实例

html5实现调用摄像头并拍照功能

electron页内查找模块介绍(代码示例)

如何使用html5实现地理位置的获取

html5音频的相关实例介绍

html5需要遵守的6个原则(介绍)

html5 localstorage知识点总结

html5+css3实现无插件拖拽上传图片(支持预览与批量)的详情介绍

更多相关阅读请进入《dragstart》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...