这篇文章主要介绍了HTML5中如何实现拖放功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为罗城企业提供专业的网站设计制作、
成都网站建设，
罗城网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
一、什么是拖放
拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图
那么在网页上其实也可以实现同样效果的拖放功能，如图
那么，就让我们来看看如何实现的吧
二、拖放事件
在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。
默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将draggable 属性设置为true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的draggable 属性默认为true，其余元素的draggable 属性默认为false
在实现拖放功能时有这样两个概念，分别是被拖动元素和目标元素，它们都有各自支持的事件，那么我们来了解一下
（1）被拖动元素的事件
被拖动元素所支持的事件如下表所示
| 事件 | 含义 |
|---|
| dragstart | 准备拖动被拖动元素时触发 |
| drag | 拖动的过程中触发（频繁触发） |
| dragend | 拖动结束时触发 |
我们来用一个例子测试一下这三个事件
Document
