[互联网]html5第二课.pptVIP

第二课 ——添加DRAG事件 一、设计方法让你的元素随你动起来 上一课最后我们添加了最简单的一些交互，当鼠标点击后会运行预设的效果。 在这节课我们要让我们生成的元素实现拖拽。 2、介绍鼠标事件 onClick 鼠标点击某个对象触发 onDblClick 鼠标双击某个对象触发 onMouseDown 鼠标在某个对象上被按下后 触发 onMouseUp 鼠标在某个对象上被松开后 触发 onMouseOver 鼠标在某个对象上移动时触 发 onMouseOut 鼠标在移出某个对象时触发 在JS中大小写是很敏感的，不同于在html的标签里添加事件可随意大小写。以下为简单示例: 1-在HTML标签里大小写很随意 div style =“” onmousedown = func() OK div style =“” OnMOUseDOwn = func() OK 2-在JS中大小写敏感，都是小写 label.onmousedown = func(){} OK label.onMouseDown = func(){} FAIL 3-用addEventListener这种方法时不仅大小写依旧敏感，而且不用写on label.addEventListener (mousedown,onEvent() ,false); OK label.addEventListener (onmousedown,onEvent() ,false); FAIL 3、分析一下实现拖拽的几个步骤 实现对一个对象的拖拽，基本可分为以下几个过程： 拖拽初始化 开始拖拽 结束拖拽 ⑴拖拽初始化 这个过程我们会选择一个对象，并且用鼠标点下该对象，所以要用到onMouseDown。 ⑵开始拖拽 这个过程中我们的鼠标一直在对象的范围内，并且不断的移动，会用到onMouseMove。 ⑶结束拖拽 当鼠标按键被抬起，整个拖拽过程就结束了，会用到onMouseUp。 4、进阶分析——拖拽初始化 ⑴初始化的时候，需要进行第一次获取当前位置。这里我们需要的是鼠标的位置。 关于鼠标位置，浏览器已经为我们提供了一个浏览器事件对象，方便我们进行获取。 鼠标位置常用有三类，即 clientX/clientY offsetX/offsetY screenX/screenY 通过下图我们可以了解到他们之间的差异。 ⑵对于拖拽的第二步会用到onmousemove事件。这一事件所引发的拖拽应该是在鼠标按下并初始化后才有效的，而当仅仅是鼠标滑过且没有鼠标按下时不应进行拖拽。 所以整个拖拽过程应该有某个变量来说明当前的状态是不是经过了初始化。 这一步需要在初始化中完成。 5、进阶分析——开始拖拽 这个是一个反复进行的过程，因为鼠标移动时不断地触发onmousemove事件。 我们的基本思路是每次触发后 通过计算鼠标新旧坐标的差值，由此得到一个位移矢量； 根据位移矢量通过上一节课中的setStyle()函数来改变对象的位置； 最后再更新鼠标坐标。 6、进阶分析——结束拖拽 当结束拖拽的时候我们要还原初始化时候的状态变量，使得拖拽结束后，在对象上移动鼠标不会移动对象。 二、具体实现 1、drag方法结构 创建一个drag方法 以一个元素对象做参数 实现对这个元素添加自定义的drag事件 function drag(obj){//obj为要添加拖拽事件的对象 obj.onmousedown = function(e){ //待添加 } obj.onmousemove = function(e){ //待添加 } obj.onmouseup = function(){ //待添加 } } 浏览器事件对象作为参数传入相应的方法 常写成： e、ev或者event 2、初始化拖拽 obj.onmousedown = function(e){ this.move = 1; //我们自己规定的标志this.move //this.move为0时，拖拽未触发。 //this.move为1时，拖拽被触发。 this.lastX = e.clientX; this.lastY = e.clientY; //第一次获取鼠标位置 } 3、开始拖拽 第一步需要判断当前是否处在拖拽状态 若不在拖拽状态就不进行拖拽。 obj.onmousemove = function(e){ if(this.move == 1){// //拖拽部分 } } 拖拽的部分根据之前的设计依旧分为三部分： 生成位移矢量 移动 更新坐标。 下面依次实现。 ⑴生成位移矢量 var l