html5第二课

对原来的函数稍作修改即可
function drag(obj obj.ontouchstart = function(e){…… } obj.ontouchmove = function(e){……} obj.ontouchend= function(){……} }
2、触摸设备获取坐标值， 我们自建getX和getY两个函数。
function getX (e){ var X = 0; var touch = e.touches[0]; //由于多点触摸设备的普 function getY (e){ var Y = 0; var touch = e.touches[0]; Y = touch.clientY; return Y; }
6、进阶分析——结束拖拽
当结束拖拽的时候我们要还原初始化时候的 状态变量，使得拖拽结束后，在对象上移动 鼠标不会移动对象。
二、具体实现
1、drag方法结构
• 创建一个drag方法 • 以一个元素对象做参数 • 实现对这个元素添加自定义的drag事件
function drag(obj){//obj为要添加拖拽事件的对象 obj.onmousedown = function(e){ //待添加 } obj.onmousemove = function(e){ //待添加 } obj.onmouseup = function(){ 浏览器事件对象作为 //待添加 参数传入相应的方法 } 常写成： }
第二课
——添加DRAG事件
一、设计方法让你的元素随你动起来 设计方法让你的元素随你动起来
• 上一课最后我们添加了最简单的一些交互， 当鼠标点击后会运行预设的效果。 • 在这节课我们要让我们生成的元素实现拖 拽。
2、介绍鼠标事件
onClick onDblClick onMouseDown onMouseUp onMouseOver onMouseOut 鼠标点击某个对象触发 鼠标双击某个对象触发 鼠标在某个对象上被按下后 触发 鼠标在某个对象上被松开后 触发 鼠标在某个对象上移动时触 发 鼠标在移出某个对象时触发
3、分析一下实现拖拽的几个步骤
• 实现对一个对象的拖拽，基本可分为以下 几个过程：
– 拖拽初始化 – 开始拖拽 – 结束拖拽
⑴拖拽初始化
这个过程我们会选择一个对象，并且用鼠标 点下该对象，所以要用到onMouseDown。
⑵开始拖拽
这个过程中我们的鼠标一直在对象的范围内， 并且不断的移动，会用到onMouseMove。
• 1、 onMouseMove、onMouseDown等 一系列鼠标事件在当下流行的
– Ios – Android
• 等以触摸做交互的设备上虽被支持，但是 体验很不好。
• 但幸运的是当下流行的移动触摸设备浏览器 都提供了一套功能完整的事件接口。
– Ontouchstart – Ontouchmove – Ontouchend – Ontouchcancel 在某个对象上手指触下时触发 在某个对象上手指移动时触发 在某个对象上手指提起时触发 当系统结束touch事件时触发
3、开始拖拽
第一步需要判断当前是否处在拖拽状态 若不在拖拽状态就不进行拖拽。
obj.onmousemove = function(e){ if(this.move == 1){// //拖拽部分 } }
• 拖拽的部分根据之前的设计依旧分为 三部分：
– 生成位移矢量 – 移动 – 更新坐标。
• 下面依次实现。
⑶结束拖拽
obj.onmouseup = function(){ this.move = 0;//还原拖拽状态 }
4、对对象添加拖拽事件
drag(mydiv); drag(mydiv_c1); drag(mydiv_c2);
至此我们上一例中的元素已经可以由鼠标进 行拖拽了。
三、增加功能， 加功能 让拖拽适配触摸设备
• label.onmousedown = func(){}
OK
• label.onMouseDown = func(){}
FAIL
3-用addEventListener这种方法时不仅 大小写依旧敏感，而且不用写on
• label.addEventListener
('mousedown',onEvent() ,false); OK • label.addEventListener ('onmousedown',onEvent() ,false); FAIL
⑶结束拖拽
当鼠标按键被抬起，整个拖拽过程就结束了， 会用到onMouseUp。
4、进阶分析——拖拽初始化
⑴初始化的时候，需要进行第一次获取当前 位置。这里我们需要的是鼠标的位置。
• 关于鼠标位置，浏览器已经为我们提供了 一个浏览器事件对象，方便我们进行获取。 • 鼠标位置常用有三类，即
– clientX/clientY – offsetX/offsetY – screenX/screenY
在JS中大小写是很敏感的， 不同于在html的标签里添加事件 可随意大小写。 以下为简单示例:
1-在HTML标签里大小写很随意
• <div style =“” onmousedown = func()> OK • <div style =“” OnMOUseDOwn = func()> OK
2-在JS中大小写敏感，都是小写
通过下图我们可以了解到他们之间的差异。 通过下图我们可以了解到他们之间的差异。
⑵对于拖拽的第二步会用到onmousemove 事件。这一事件所引发的拖拽应该是在鼠标 按下并初始化后才有效的，而当仅仅是鼠标 滑过且没有鼠标按下时不应进行拖拽。 所以整个拖拽过程应该有某个变量来说明当 前的状态是不是经过了初始化。 这一步需要在初始化中完成。
前只需获取第 一个触摸点。
X = touch.clientX; //得到X return X; }
有了这两个函数只要将原来的 clientX和clientY 用 getX(e)和getY(e) 替代即可适配触摸设备了。
e、ev或者event
2、初始化拖拽
obj.onmousedown = function(e){ this.move = 1; //我们自己规定的标志this.move //this.move为0时，拖拽未触发。 //this.move为1时，拖拽被触发。 stX = e.clientX; stY = e.clientY; //第一次获取鼠标位置 }
⑴生成位移矢量
var l = stX; var t = stY; //用最新获取的坐标值减去原始坐标值得到x， y两个方向上的位移矢量。
⑵移动
setStyle(this, { l: parseInt(this.style.left) t: parseInt(this.style.top) //使用之前创建的setStyle函数进行方便地修改位置 //目标位置 = 原位置 + 位移矢量 stX = e.clientX; stY = e.clientY; //更新坐标值，供下一次生成位移矢量用 e.stopPropagation();//阻止相关事件冒泡 //当两个元素在空间上重叠时，那么两个事件的onmousemove 就会被同时触发。stopPropagation就是为了防止这样的事情。 //注意stopPropagation是符合W3C标准的，但不兼容ie，ie上 使用不符合W3C标准的cancelBubble。 this.style.left和 this.style.top的值均为字 串符且有单位‘px’， + l, 通过parseInt来得到其中 + t}); 的数值
5、进阶分析——开始拖拽
• 这个是一个反复进行的过程，因为鼠标移 动时不断地触发onmousemove事件。 • 我们的基本思路是每次触发后
– 通过计算鼠标新旧坐标的差值，由此得到一个 位移矢量； – 根据位移矢量通过上一节课中的setStyle()函数 来改变对象的位置； – 最后再更新鼠标坐标。