脚本宝典收集整理的这篇文章主要介绍了HTML5讲解之拖拽事件dragstart、drag和dragend，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

拖拽事件

　　通过拖拽事件，咱们就可以控制拖拽很多东西了。其中什么元素或者是哪里发生了拖拽事件是最关键的。有些事件是在被拖动的元素上触发，有些事件是在放置目标上触发的。拖动某元素时候，触发的事件有：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事件的目标都是作为放置目标的元素。

　　自定义放置目标

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

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

　　HTML代码

　　CSS代码

　　JavaScript代码

以上就是HTML5讲解之拖拽事件dragstart、drag和dragend的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5讲解之拖拽事件dragstart、drag和dragend全部内容，希望文章能够帮你解决HTML5讲解之拖拽事件dragstart、drag和dragend所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。