最近在学习面向对象的写法, 所以就选了常见的拖拽练习了一下. html 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .box{
- width:100px;
- height:100px;
- background:red;
- position:absolute;
- top:0;
- left:0;
- }
- </style>
- <script>
- function Drag(ele){
- this.ele=ele;
- }
- Drag.prototype={
- fndown:function(event){
- var _this=this;
- this.disP={
- x:event.clientX-this.ele.offsetLeft,
- y:event.clientY-this.ele.offsetTop
- };
- document.onmousemove=function(ev){
- ev=ev||Windows.event;
- _this.fnmove(ev);
- };
- document.onmouseup=function(){
- _this.fnup();
- }
- },
- fnmove:function(event){
- this.move={
- x:event.clientX-this.disP.x,
- y:event.clientY-this.disP.y
- };
- this.ele.style.left=this.move.x+'px';
- this.ele.style.top=this.move.y+'px';
- },
- fnup:function(){
- document.onmousemove=null;
- document.onmouseup=null;
- },
- init:function(){
- var self=this;
- self.ele.onmousedown=function(event){
- event=event||Windows.event;
- self.fndown(event);
- return false;
- }
- }
- };
- Windows.onload=function(){
- var box=document.querySelector('#box'),
- drag=new Drag(box);
- drag.init();
- };
- </script>
- </head>
- <body>
- <div id="box" class="box"></div>
- </body>
- </HTML>
移动端的拖拽需要用到 touch 事件, 常见的 touch 事件有
- touchstart: // 手指放到屏幕上时触发
- touchmove: // 手指在屏幕上滑动式触发
- touchend: // 手指离开屏幕时触发
- touchcancel: // 系统取消 touch 事件的时候触发, 基本没用过.
每个触摸事件被触发后, 会生成一个 event 对象, event 对象里额外包括以下三个触摸列表
- touches: // 当前屏幕上所有手指的列表
- targetTouches: // 当前 dom 元素上手指的列表, 尽量使用这个代替 touches
- changedTouches: // 涉及当前事件的手指的列表, 尽量使用这个代替 touches
这些列表里的每次触摸由 touch 对象组成, touch 对象里包含着触摸信息, 主要属性如下:
- clientX / clientY: // 触摸点相对浏览器窗口的位置
- pageX / pageY: // 触摸点相对于页面的位置
- screenX / screenY: // 触摸点相对于屏幕的位置
- identifier: //touch 对象的 ID
- target: // 当前的 DOM 元素
移动端的拖拽有个问题, 开始 transilate 的值的获取还没有解决, 应该需要正则匹一下
**HTML 代码 **
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .box{
- width:100px;
- height:100px;
- background:red;
- }
- </style>
- <script>
- function Touch(ele){
- var _this=this;
- this.ele=ele;
- this.transP={
- x:0,
- y:0
- };
- this.events={
- handleEvent:function(event){
- switch(event.type){
- case 'touchstart':
- _this.start(event);
- break;
- case 'touchmove':
- _this.move(event);
- break;
- case 'touchend':
- _this.end(event);
- break;
- }
- }
- }
- }
- Touch.prototype={
- start:function(ev){
- var touches=ev.targetTouches[0],
- _this=this;
- this.disP={
- x:touches.pageX-this.transP.x,
- y:touches.pageY-this.transP.y,
- id:touches.identifier
- };
- console.log('aaa');
- document.addEventListener('touchmove',_this.events,false);
- document.addEventListener('touchend',_this.events,false);
- },
- move:function(ev){
- var touches=ev.targetTouches[0];
- if(touches.identifier== this.disP.id){
- console.log('move');
- this.transP={
- x:touches.pageX-this.disP.x,
- y:touches.pageY-this.disP.y
- };
- this.ele.style.transform='translate3d('+this.transP.x+'px,'+this.transP.y+'px,0)';
- this.ele.style.webkittransform='translate3d('+this.transP.x+'px,'+this.transP.y+'px,0)';
- }
- },
- end:function(ev){
- ev=ev||Windows.event;
- var _this=this;
- if(ev.changedTouches[0].identify==this.disP.id){
- document.removeEventListener('touchmove',_this.events,false);
- document.removeEventListener('touchend',_this.events,false);
- }
- },
- init:function(){
- var _this=this;
- this.ele.addEventListener('touchstart',_this.events,false);
- }
- };
- Windows.onload=function(){
- var box=document.querySelector('#box'),
- touch=new Touch(box);
- touch.init();
- };
- </script>
- </head>
- <body>
- <div id="box" class="box"></div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/28530/6611c84907a9193c9d2b213d01614718.html