HTML新增了的关于拖放的API，通过拖放API可以让HTML页面中的任何元素都变成可以拖动的，通过拖放机制可以开发出更加友好的人机交互界面。

拖放操作分为两个动作：拖和放。

启动拖动

在HTML中，<img…/>元素默认时可以拖动的；而<a…/>元素只要设置了href属性，则也默认为可以拖动。

如下代码：

html5div拖拽插件 html5拖拽api_html5div拖拽插件


对于普通元素而言，只要将该元素的draggable属性改为true，便可变成拖动。但这仅仅表示该元素是可以拖动的，想要看到拖动效果，就必须使其携带数据，因此除了将该元素的draggable改为true，还需为该元素的ondragstart设置监听器。

如下图代码：

html5div拖拽插件 html5拖拽api_html5div拖拽插件_02

接受放

显然，不管是拖动图片还是拖动<div…/>元素，拖动时都会显示一个“禁止显示”；这表明这些元素被拖动到的目的地并不接受被拖动元素，即被拖动元素被“拖过”document对象时，document对象阻止了默认的拖动事件。而其他HTML组件也时位于document对象内的，因此它们也不能接受“放”。

为了让document接受“放”，需要为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。

如下代码：

html5div拖拽插件 html5拖拽api_html5div拖拽插件_03


然而，不同浏览器对拖放操作的默认动作并不相同。如果开发者想要取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。

即增加如下代码：

html5div拖拽插件 html5拖拽api_HTML_04

因此，想要实现一个允许自由拖动的<div…/>元素，只需要监听document的ondrop方法，当用户把<div…/>元素“放”到document中时，通过JavaScript代码将该元素移动到该位置即可。
- 下面附上代码：实现一个可以自由拖动的<div…/>元素

-<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>可拖拽</title>
</head>
<body>
	<div id="source" style="width:80px;height;80px;
	border:1px solid black;
	background-color:#bbb;"
	draggable="true">啦啦啦啦</div>
	<script type="text/javascript">
		var source=document.getElementById("source");
		source.ondragstart=function(evt)
		{
			//让拖动操作携带数据
		evt.dataTransfer.setData("text","疯狂牙医");
		}
		document.ondragover=function(evt)
		{
		//取消时间的默认行为
		return false;
		}
		document.ondrop=function(evt)
		{
		source.style.position="absolute";
		source.style.left=evt.pageX+"px";
		source.style.top=evt.pageY+"px";
		//取消事件的默认行为；
		return false;
		}
	</script>
</body>
</html>