在拖动元素经过某些无效放置目标的时候,可以看到一种特殊鼠标手势(圆环中一条反斜线),表示不能放置。虽然所有元素都支持放置目标事件,但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素,无论用户如何操作,都不会发生drop事件。不过,你可以把任何元素变成有效的放置目标,方法是重写dragenter和dragover事件的默认行为。
重写了默认行为之后,就会发现当拖动着元素移动到放置目标上的时候,光标变成允许放置的符号。在Firefox 3.5+中,放置事件的默认行为是打开被放到放置目标上的url。如果是把图像拖到放置目标上,页面就会转向图像文件。如果是把文本拖放到放置目标上,则会导致无效url错误。所以为了让Firefox支持政正常的拖放,还要取消drop事件的默认行为,阻止打开拖拽元素的URL。小例子如下
HTML代码
CSS代码
JavaScript代码
以上就是HTML5讲解之拖拽事件dragstart、drag和dragend的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html5 frameset标签的替代方案是什么?frameset标签替代的解决办法
更多相关阅读请进入《dragstart》频道 >>

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