HTML5:拖拽事件dragstart、drag和dragend
[导读] 拖拽事件 通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:
拖拽事件
通过拖拽事件,咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发,有些事件是在放置目标上触发的。拖动某元素时候,触发的事件有:dragstart事件、drag事件和dragend事件。
按下鼠标键并开始移动鼠标的时候,会在被拖拽的元素上触发dragstart事件。这时候光标变成”不能放”符号(圆环中有一条反斜线),表示不能把元素放在自己上门。拖拽开始时,可以通过ondragstart事件处理程序运行JavaScript代码。
触发dragstart事件后,随即会触发drag事件,而在元素被拖动期间会持续触发drag事件。这个事件与mousemove和touchmove事件类似。当拖动停止时(无论把元素放到了有效的放置目标,还是放到了无效的放置目标上),都会发生dragend事件。
上面说的三个事件的目标都是被拖动的元素触发。默认情况下,浏览器不会再拖动期间改变被拖动元素的外观。但是可以自行修改。不过,大多数浏览器会为正被拖动的元素创建一个半透明的副本,这个副本始终跟随光标移动。当某个元素被拖动到一个有效的放置目标的时候,会触发的事件有:dragenter事件、dragover事件和dragleave或者drop事件。
只要有元素被拖动到放置目标上,就会触发dragenter事件(类似于mouSEO((Search Engine Optimization))ver事件)。紧随其后的是dragover事件,而且在被拖动的元素还在放置目标的范围内移动是,会连续触发dragover事件。如果元素被拖出放置目标,dragover事件不再发生,但是会触发dragleave事件(类似于mouSEO((Search Engine Optimization))ut事件)。如果元素被放到了放置目标中会触发drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目标都是作为放置目标的元素。
自定义放置目标
在拖动元素经过某些无效放置目标的时候,可以看到一种特殊鼠标手势(圆环中一条反斜线),表示不能放置。虽然所有元素都支持放置目标事件,但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如何操作,都不会发生drop事件。不过,你可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。
重写了默认行为之后,就会发现当拖动着元素移动到放置目标上的时候,光标变成允许放置的符号。在Firefox 3.5 中,放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上,页面就会转向图像文件。如果是把文本拖放到放置目标上,则会导致无效url错误。所以为了让Firefox支持政正常的拖放,还要取消drop事件的默认行为,阻止打开拖拽元素的URL。小例子如下
HTML代码
CSS代码
JavaScript代码
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangeicfj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13