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


当前第2页 返回上一页

  在拖动元素经过某些无效放置目标的时候,可以看到一种特殊鼠标手势(圆环中一条反斜线),表示不能放置。虽然所有元素都支持放置目标事件,但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如何操作,都不会发生drop事件。不过,你可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。

  重写了默认行为之后,就会发现当拖动着元素移动到放置目标上的时候,光标变成允许放置的符号。在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上,页面就会转向图像文件。如果是把文本拖放到放置目标上,则会导致无效url错误。所以为了让Firefox支持政正常的拖放,还要取消drop事件的默认行为,阻止打开拖拽元素的URL。小例子如下

  HTML代码

\

  CSS代码

\

  JavaScript代码

QQ截图20170810095024.png

以上就是HTML5讲解之拖拽事件dragstart、drag和dragend的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

10个html5代码片段可在网站制作中随时可用详解

html5规定元素是否可拖动的属性draggable

html5和html能看出区别吗

h5文件异步上传

如何用h5实现拖放效果

html5新增了哪些input类型及其属性?

html5 frameset标签的替代方案是什么?frameset标签替代的解决办法

html5中video标签无法播放mp4问题的解决办法

h5的标签使用详解

html5初窥2之新元素

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




打赏

取消

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

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

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

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

评论

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