H5---全局拖拽属性

H5—全局拖拽属性

（1）draggable全局拖拽属性—规定元素是否可拖动

注意：链接和图像默认是可拖动的，不需要 draggable 属性

 <p draggable="true"><br />这是一段可拖拽的段落</p>

H5—拖拽API
拖拽API是H5的新特性，在正式介绍前首先需要了解两个概念“拖拽和释 放”。
新概念：
拖拽drag、释放drop
场景解析：
拖拽指的是鼠标点击源对象后一直移动不松手，在不断移动过程中即为拖拽。一但松手就释放了，一般会在进入到目标对象后进行释放。

（1）源对象与目标对象
• ①源对象drag：
指的是鼠标点击后拖拽的一个事物对象，这里可以是一张图片、一个DIV区域、一段文本、一个文件等等。
• ②目标对象drop：
指的是拖动源对象后移动到一块区域对象，源对象可以进入这个区域，可以在这个区域上方悬停（未松手），可以释松手释放将源对象放置此处（已松手），也可以悬停后离开该区域。

（2）源对象AP
• 了解什么是源对象和目标对象后，回归前端中的拖拽API，被拖动的源对象相关API主要包含以下几个

（2）源对象API
• 案例1：实现一个可以随着鼠标拖动而移动的图片
• 接下来，在控制台调试后发现，可以正常监听拖拽源对象的3个阶段，即开始拖动、拖动中、拖动结束。

<img class="data_area" src="dome.png" />
<script type="text/javascript">
	var data_arer=document.querySelector("img.data_area");
	data_arer.ondragstart=function(e){
		console.log("事件源开始拖动")
	}
	data_arer.ondrag=function(e){
		console.log("事件源拖动ing...")
	}
	data_arer.ondragend=function(e){
		console.log("事件源拖动结束")
	}
</script>

（2）源对象API
正式讲解案例逻辑前，需要先回顾两个坐标属性，即page系列（pageX、pageY）和offset系列（offsetX、offsetY）。