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)。