这篇文章主要介绍了HTML5中如何实现拖放功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联始终坚持【策划先行，效果至上】的经营理念，通过多达10余年累计超上千家客户的网站建设总结了一套系统有效的推广解决方案，现已广泛运用于各行各业的客户，其中包括：成都VR全景等企业，备受客户赞美。
一、什么是拖放
拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图
那么在网页上其实也可以实现同样效果的拖放功能，如图
那么，就让我们来看看如何实现的吧
二、拖放事件
在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。
默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为 true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，其余元素的 draggable 属性默认为 false
在实现拖放功能时有这样两个概念，分别是被拖动元素和目标元素，它们都有各自支持的事件，那么我们来了解一下
（1）被拖动元素的事件
被拖动元素所支持的事件如下表所示
| 事件 | 含义 |
|---|---|
| dragstart | 准备拖动被拖动元素时触发 |
| drag | 拖动的过程中触发（频繁触发） |
| dragend | 拖动结束时触发 |
我们来用一个例子测试一下这三个事件
