一、含义

拖放顾名思义，就是把这个地方的东西拖放到另一个地方。官方定义是抓取一个对象拖放到一个位置。继续往下看。

二、须知

首先我们要知道，他支持任何元素，意思就是任何标签。比如一张图片、一个div、一段文本等等。下面我们具体看下怎么实现拖放及具体相关事件。

你可能会有些好奇为什么支持任何元素？

其实这归功于draggable属性。HTML5很牛掰的给所有元素都赋予了“draggable”新属性。你可以用它来设置当前这个元素是否支持拖放。比如支持就在元素内添加draggable="true"。另外需要注意的是图片和超链接都是默认支持拖放的。

HTML5之drag拖放

三、详细

其实拖放可以分为2部分，拖拽与释放，即drag与drop 。简单说就是鼠标点击（源）对象后一直移动不松手，你松手就释放啦。你可能有注意到上一句话提到源对象。其实在拖放的这个动作完成也可以分为2个对象。

源对象 --你一开始点击的那个对象
目标对象--你想移动到的位置区域，源对象可以在这个区域内游走，想放就放

好了基本情况都了解了，我们具体看下在拖放这动作开始到结束的期间都触发了哪些事件。

HTML5之drag拖放

3.1、相关事件

我们来看在源对象上触发的事件有哪些？
ondragstart 开始拖动时触发
ondrag 正在进行中触发，即正在拖动时触发
ondragend 用户完成元素拖动后触发
我们再来看在目标对象上触发的事件有哪些？
ondragenter 当目标对象出现源对象，即你拖这源对象进入目标对象区域的一瞬间触发
ondragover 目标对象被源对象拖动着悬停在上方
ondragleave 当源对象离开目标对象区域触发
ondrop 松手触发

现在对所有事件有所了解了。下面让我们来了解下他们之前是如何进行数据传递的。

dataTransfer 传递数据

上述的所有事件都有一个新的属性就是这个“dataTransfer” 我们就是用它来进行数据传递。

 e.data.Transfer{}

setData() 保存数据

数据已经可以传递了，现在来看下保存。

e.dataTransfer.setData( key, value );

getData() 读取数据

数据既然保存，相对的我们也有读取数据的方法。

e.dataTransfer.getData( key);

跟一般的存储类似都是set...然后get... 相信你应该已经记住了。

下面看下实例可以帮你加深印象更好的掌握。

3.2、实例

<!DOCTYPE html>
<html>
head>
		<meta charset="UTF-8">
		<title>HTML5之drag拖放测试</title>
	</head>
	<style type="text/css">
		.source-img {
			width: 450px;
			height: 300px;
		}
		
		.target-obj {
			border: 4px solid lightcoral;
			width: 500px;
			height: 400px;
			float: right;
			margin-right: 30px;
			text-align: center;
			padding: 50px;
		}
	</style>
	<dy>
		<!--源对象-->
		<img class="source-img" id="sourceId" draggable="true" ondragstart="drag(event)" src="../../images/cbd.jpg" />
		<!目标对象-->
		<div class="target-obj" ondrop="drop(event)" ondragover="allowDrop(event)" id="targetObj"></div>
		<scpt type="text/javascript">
			// 第一步设置可拖放，draggable="true" 
			// 拖什么？
			function drag(e) {
				e.dataTransfer.setData('dom', e.target.id); // 存dom 的id ,便于释放时找到这个dom
			};
			// 放什么？放在哪？
			function drop(e) {
				e.preventDefault(); // 阻止浏览器数据默认处理
				var idName = e.dataTransfer.getData('dom'); // 读取数据
				e.target.appendChild(document.getElementById(idName)); // 添加
			};
			// 允许
			function allowDrop(e) {
				e.preventDefault(); // 阻止浏览器数据默认处理
			};
		</script>
	</body>
</html>

效果

HTML5之drag拖放