image.png
计算从el元素左上角至鼠标单击元素的坐标的距离，x偏移，y偏移

初步封装

  1. // var dragNclick = function (a, b) {
  2. //   console.log(a, b);
  3. // }; //不能写（）
  5. // dragNclick(1, 2); //这是一个模块
  7. //拖拽 封装好 以后直接调用就行了
  8. //初步封装 把上节课的封装好 
  10. var dragNclick = (function (elem) {
  11.   drag();
  12.   function drag() {
  13.     var x, y;
  14.     addEvent(elem, "mousedown", function (e) {
  15.       // console.log('1');
  16.       var e = e || window.event;
  17.       // console.log(elem);
  18.       x = pagePos(e).X - getStyles(elem, "left");
  19.       y = pagePos(e).Y - getStyles(elem, "top");
  21.       addEvent(document, "mousemove", mouseMove);
  22.       addEvent(document, "mouseup", mouseUp);
  23.       cancelBubble(e); //保险起见 把阻止事件放进去
  24.       preventDefaultEvent(e);
  25.     });
  26.     function mouseMove(e) {
  27.       console.log(elem);
  28.       var e = e || window.event;
  30.       elem.style.left = pagePos(e).X - x + "px";
  31.       elem.style.top = pagePos(e).Y - y + "px";
  32.     }
  34.     function mouseUp(e) {
  35.       var e = e || window.event;
  36.       removeEvent(document, "mousemove", mouseMove);
  37.       removeEvent(document, "mouseup", mouseUp);
  38.     }
  39.   }
  40. });

调用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8. </head>
  9. <style>
  10.    body{
  11.        margin: 0;
  12.    }
  13.    a{
  14.        position: absolute;
  15.        top: 0;
  16.        left: 0;
  17.        width: 100px;
  18.        height: 100px;
  19.        background-color: green;
  20.    }
  21. </style>
  22. <body>
  23.     <!-- <a href="http://www.baidu.com">百度</a> -->
  25.     <a href="javascript:;">百度</a>
  26.     <!-- <a href="javascript:void(0)"></a> -->
  27.     <!-- <button>点击</button> -->
  28.     <script type="text/javascript" src="./utils.js"></script>
  29.     <script type="text/javascript" src="./index.js"></script>
  30.     <script>
  31.         // var oBtn=document.getElementsByTagName('button')[0];
  33.         var oLink=document.getElementsByTagName('a')[0];
  34.         // oMenu=document.getElementsByTagName('div')[0];
  36.         dragNclick(oLink)
  37.         oBtn.onclick = function() {
  38.             console.log('click');
  39.         }
  40.         oBtn.onmousedown=function() {
  41.             console.log('mousedown');
  42.         }
  43.         oBtn.onmouseup = function() {
  44.             console.log('mouseup');  
  45.         }
  47.         // mousedown+mouseup=click
  50. //https://aoxvpn.cc/?ch=0
  51.     </script>
  52. </body>
  53. </html>

点击与拖拽1

有不好的地方，当符合条件时既有点击，又有拖拽

  1. var dragNclick = (function (elem,elemClick) {
  3.     var bTime=0,
  4.     eTime = 0;
  6.     drag();
  7.   function drag() {
  8.     var x, y;
  9.     addEvent(elem, "mousedown", function (e) {
  10.       // console.log('1');
  11.       var e = e || window.event;
  13.       bTime=new Date().getTime();
  14.         console.log('bTime',bTime);
  15.       // console.log(elem);
  16.       x = pagePos(e).X - getStyles(elem, "left");
  17.       y = pagePos(e).Y - getStyles(elem, "top");
  19.       addEvent(document, "mousemove", mouseMove);
  20.       addEvent(document, "mouseup", mouseUp);
  21.       cancelBubble(e); //保险起见 把阻止事件放进去
  22.       preventDefaultEvent(e);
  23.     });
  24.     function mouseMove(e) {
  25.     //   console.log(elem);
  26.       var e = e || window.event;
  28.       elem.style.left = pagePos(e).X - x + "px";
  29.       elem.style.top = pagePos(e).Y - y + "px";
  30.     }
  32.     function mouseUp(e) {
  33.       var e = e || window.event;
  34.       eTime=new Date().getTime();
  35.       console.log('减法结果',eTime-bTime)
  36.       console.log('eTime',eTime)
  37.       if(eTime-bTime<100){//如果小于100就是点击事件，而不是拖动事件
  38.         //   console.log(1)//可以先通过打印判断，条件是否能执行，是否得到预期，
  39.         elemClick();
  40.       }
  41.       removeEvent(document, "mousemove", mouseMove);
  42.       removeEvent(document, "mouseup", mouseUp);
  43.     }
  44.   }
  45. });

点击与拖拽2

  1. var dragNclick = (function (elem, elemClick) {
  2.   var bTime = 0,
  3.     eTime = 0,
  4.     oPos=[];
  6.   drag();
  7.   function drag() {
  8.     var x, y;
  9.     addEvent(elem, "mousedown", function (e) {
  10.       // console.log('1');
  11.       var e = e || window.event;
  12.       bTime = new Date().getTime();
  14.       // console.log("bTime", bTime);
  15.       // console.log(elem);
  16.       x = pagePos(e).X - getStyles(elem, "left");
  17.       y = pagePos(e).Y - getStyles(elem, "top");
  19.       addEvent(document, "mousemove", mouseMove);
  20.       addEvent(document, "mouseup", mouseUp);
  21.       cancelBubble(e); //保险起见 把阻止事件放进去
  22.       preventDefaultEvent(e);
  23.     });
  24.     function mouseMove(e) {
  25.       //   console.log(elem);
  26.       var e = e || window.event;
  28.       elem.style.left = pagePos(e).X - x + "px";
  29.       elem.style.top = pagePos(e).Y - y + "px";
  30.     }
  32.     function mouseUp(e) {
  33.       var e = e || window.event;
  34.       eTime = new Date().getTime();
  35.       oPos=[getStyles(elem,'left'),getStyles(elem,'top')];
  37.       // console.log("减法结果", eTime - bTime);
  38.       // console.log("eTime", eTime);
  40.       if (eTime - bTime < 100) {
  41.         //如果小于100就是点击事件，而不是拖动事件
  42.         //   console.log(1)//可以先通过打印判断，条件是否能执行，是否得到预期，
  44.         elem.style.left=oPos[0]+'px';
  45.         elem.style.top=oPos[1]+'px';
  46.         elemClick();
  47.       }
  48.       removeEvent(document, "mousemove", mouseMove);
  49.       removeEvent(document, "mouseup", mouseUp);
  50.     }
  51.   }
  52. });

元素原型封装

  1. Element.prototype.dragNclick = (function (_self,elemClick) {
  2.   var bTime = 0,
  3.     eTime = 0,
  4.     oPos=[];
  6.   drag.call(this);//改变this指向，变成调用的this
  7.   function drag() {
  8.     var x, y,
  9.     _self=this;
  11.     // console.log('this',this)
  12.     addEvent(this, "mousedown", function (e) {
  13.       // console.log('1');
  14.       var e = e || window.event;
  17.       bTime = new Date().getTime();
  20.       // console.log("bTime", bTime);
  21.       // console.log(elem);
  22.       x = pagePos(e).X - getStyles(_self, "left");
  23.       y = pagePos(e).Y - getStyles(_self, "top");
  25.       addEvent(document, "mousemove", mouseMove);
  26.       addEvent(document, "mouseup", mouseUp);
  27.       cancelBubble(e); //保险起见 把阻止事件放进去
  28.       preventDefaultEvent(e);
  29.     });
  30.     function mouseMove(e) {
  31.       //   console.log(elem);
  32.       var e = e || window.event;
  34.       _self.style.left = pagePos(e).X - x + "px";
  35.       _self.style.top = pagePos(e).Y - y + "px";
  36.     }
  38.     function mouseUp(e) {
  39.       var e = e || window.event;
  40.       eTime = new Date().getTime();
  41.       oPos=[getStyles(_self,'left'),getStyles(_self,'top')];
  43.       // console.log("减法结果", eTime - bTime);
  44.       // console.log("eTime", eTime);
  46.       if (eTime - bTime < 100) {
  47.         //如果小于100就是点击事件，而不是拖动事件
  48.         //   console.log(1)//可以先通过打印判断，条件是否能执行，是否得到预期，
  50.         _self.style.left=oPos[0]+'px';
  51.         _self.style.top=oPos[1]+'px';
  52.         elemClick();
  53.       }
  54.       removeEvent(document, "mousemove", mouseMove);
  55.       removeEvent(document, "mouseup", mouseUp);
  56.     }
  57.   }
  58. });

解决拖拽超出滚动条的问题

image.png

  1. Element.prototype.dragNclick = (function (_self,elemClick) {
  2.   var bTime = 0,
  3.       eTime = 0,
  4.       oPos=[],
  5.       wWidth=getViewportSize().width,
  6.       wHeight=getViewportSize().height,
  7.       eleWidth=getStyles(this,'width'),
  8.       eleHeight=getStyles(this,'height');
  10.   drag.call(this);//改变this指向，变成调用的this
  12.   function drag() {
  13.     var x, y,
  14.         _self=this;
  16.     // console.log('this',this)
  17.     addEvent(this, "mousedown", function (e) {
  18.       // console.log('1');
  19.       var e = e || window.event;
  22.       bTime = new Date().getTime();
  25.       // console.log("bTime", bTime);
  26.       // console.log(elem);
  27.       x = pagePos(e).X - getStyles(_self, "left");
  28.       y = pagePos(e).Y - getStyles(_self, "top");
  30.       addEvent(document, "mousemove", mouseMove);
  31.       addEvent(document, "mouseup", mouseUp);
  32.       cancelBubble(e); //保险起见 把阻止事件放进去
  33.       preventDefaultEvent(e);
  34.     });
  35.     function mouseMove(e) {
  36.       //   console.log(elem);
  37.       var e = e || window.event,
  38.           eleLeft=pagePos(e).X-x,//
  39.           eleTop=pagePos(e).Y-y;
  41.       if(eleLeft<=0){
  42.         eleLeft=0;
  43.       }else if(eleLeft>=wWidth-eleWidth){//
  44.         eleLeft=wWidth-eleWidth-1;
  45.       }
  47.       if(eleTop<=0){
  48.         eleTop=0;
  49.       }else if(eleTop>=wHeight-eleHeight){
  50.         eleTop=wHeight-eleHeight-1;
  51.       }
  53.       // _self.style.left = pagePos(e).X - x + "px";
  54.       // _self.style.top = pagePos(e).Y - y + "px";
  56.       _self.style.left = eleLeft+ "px";
  57.       _self.style.top = eleTop + "px";
  58.     }
  60.     function mouseUp(e) {
  61.       var e = e || window.event;
  62.       eTime = new Date().getTime();
  63.       oPos=[getStyles(_self,'left'),getStyles(_self,'top')];
  65.       // console.log("减法结果", eTime - bTime);
  66.       // console.log("eTime", eTime);
  68.       if (eTime - bTime < 100) {
  69.         //如果小于100就是点击事件，而不是拖动事件
  70.         //   console.log(1)//可以先通过打印判断，条件是否能执行，是否得到预期，
  72.         _self.style.left=oPos[0]+'px';
  73.         _self.style.top=oPos[1]+'px';
  74.         elemClick();
  75.       }
  76.       removeEvent(document, "mousemove", mouseMove);
  77.       removeEvent(document, "mouseup", mouseUp);
  78.     }
  79.   }
  80. });

封装右键菜单

image.png

  1. Element.prototype.dragNclick = function ( menu,elemClick) {
  2.   var bTime = 0,
  3.       eTime = 0,
  4.       oPos = [],
  5.       wWidth = getViewportSize().width,
  6.       wHeight = getViewportSize().height,
  7.       eleWidth = getStyles(this, "width"),
  8.       eleHeight = getStyles(this, "height"),
  9.       mWidth=getStyles(menu,'width'),
  10.       mHeight=getStyles(menu,'height'),
  11.       cbTime=0,
  12.       ceTime=0,
  13.       counter=0;
  15.   drag.call(this); //改变this指向，变成调用的this
  17.   function drag() {
  18.     var x,
  19.         y,
  20.         _self = this;
  22.     // console.log('this',this)
  23.     addEvent(this, "mousedown", function (e) {
  24.       // console.log('1');
  25.       var e = e || window.event,
  26.           btnCode=e.button;//e.button消耗效率，缓存一下比较好
  28.       if(btnCode===2){
  30.         var mLeft=pagePos(e).X,
  31.             mTop=pagePos(e).Y;
  33.         if(mLeft<=0){
  34.           mLeft=0
  35.         }else if(mLeft>=wWidth-mWidth){
  36.           mLeft=pagePos(e).X-mWidth;
  37.         }
  40.         if(mTop<=0){
  41.           mTop=0;
  42.         }else if(mTop>=wHeight-mHeight){
  43.           mTop=pagePos(e).Y-mHeight
  44.         }
  46.         menu.style.left=mLeft+'px';
  47.         menu.style.top=mTop+'px';
  49.         menu.style.display='block';
  50.       }else if(btnCode===0){
  51.         bTime = new Date().getTime();
  52.         oPos=[getStyles(_self,'left'),getStyles(_self,'top')];
  53.         menu.style.display='none';
  55.         // console.log("bTime", bTime);
  56.         // console.log(elem);
  57.         x = pagePos(e).X - getStyles(_self, "left");
  58.         y = pagePos(e).Y - getStyles(_self, "top");
  60.         addEvent(document, "mousemove", mouseMove);
  61.         addEvent(document, "mouseup", mouseUp);
  62.         cancelBubble(e); //保险起见 把阻止事件放进去
  63.         preventDefaultEvent(e);
  64.       }
  65.     });
  67.     //阻止默认右键点击事件，右键点击不会触发默认的右键菜单
  68.     addEvent(document,'contextmenu',function(e){
  69.       var e=e||window.event;
  70.       preventDefaultEvent(e);
  71.     })
  72.     //点击文档区域，让自定义的菜单消失
  73.     addEvent(document,'click',function(e){
  74.       menu.style.display='none';
  75.     })
  76.     //阻止冒泡
  77.     addEvent(menu,'click',function(e){
  78.       var e=e||window.event;
  79.       cancelBubble(e);
  80.     })
  82.     function mouseMove(e) {
  83.       //   console.log(elem);
  84.       var e = e || window.event,
  85.           eleLeft = pagePos(e).X - x, //
  86.           eleTop = pagePos(e).Y - y;
  88.       if (eleLeft <= 0) {
  89.         eleLeft = 0;
  90.       } else if (eleLeft >= wWidth - eleWidth) {
  91.         //
  92.         eleLeft = wWidth - eleWidth - 1;
  93.       }
  95.       if (eleTop <= 0) {
  96.         eleTop = 0;
  97.       } else if (eleTop >= wHeight - eleHeight) {
  98.         eleTop = wHeight - eleHeight - 1;
  99.       }
  101.       // _self.style.left = pagePos(e).X - x + "px";
  102.       // _self.style.top = pagePos(e).Y - y + "px";
  104.       _self.style.left = eleLeft + "px";
  105.       _self.style.top = eleTop + "px";
  106.     }
  108.     function mouseUp(e) {
  109.       var e = e || window.event;
  110.       eTime = new Date().getTime();
  111.       oPos = [getStyles(_self, "left"), getStyles(_self, "top")];
  113.       // console.log("减法结果", eTime - bTime);
  114.       // console.log("eTime", eTime);
  116.       if (eTime - bTime < 100) {
  117.         //如果小于100就是点击事件，而不是拖动事件
  118.         //   console.log(1)//可以先通过打印判断，条件是否能执行，是否得到预期，
  120.         _self.style.left = oPos[0] + "px";
  121.         _self.style.top = oPos[1] + "px";
  124.         counter++;
  125.         if(counter===1){
  126.           cbTime=new Date().getTime();
  127.         }
  128.         if(counter===2){
  129.           ceTime=new Date().getTime();
  130.         }
  132.         if(cbTime&&ceTime&&(ceTime-cbTime<200)){
  133.           elemClick();
  134.           // cbTime=0;
  135.           // ceTime=0;
  136.           // counter=0;
  137.         }
  139.         t=setTimeout(function(){//如果点一次，隔2秒清零，要不然无限叠加次数
  140.           cbTime=0;
  141.           ceTime=0;
  142.           counter=0;
  143.           clearTimeout(t);
  144.         },200);
  146.       }
  147.       removeEvent(document, "mousemove", mouseMove);
  148.       removeEvent(document, "mouseup", mouseUp);
  149.     }
  150.   }
  151. };

多人协作封装

  1. ;(function(){
  2.   var Test=function(opt){
  4.   }
  5.   Test.prototype={
  7.   }
  8.   window.Test=Test;
  9. })();
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  10. </head>
  12. <body>
  13.     <input type="text" id="num1">
  14.     <input type="text" id="num2">
  15.     <div class="btn-group">
  16.         <button data-sign="plus">+</button>
  17.         <button data-sign="minus">-</button>
  18.         <button data-sign="mul">*</button>
  19.         <button data-sign="div">/</button>
  20.     </div>
  21.     <script type="text/javascript" src="./utils.js"></script>
  23.     <script>
  24.         // console.log(document.getElementsByClassName('btn-group')[0])
  26.         ; (function () {
  28.             var _self;//保存this
  29.             var Test = function (opt) {
  30.                 this.num1 = opt.num1;
  31.                 this.num2 = opt.num2;
  32.                 this.btnGroup = opt.btnGroup;
  33.                 _self = this;
  34.             }
  35.             Test.prototype = {
  36.                 init: function () {//
  37.                     this.bindEvent();
  38.                 },
  39.                 bindEvent: function () {
  40.                     var btns = this.btnGroup;
  41.                     // _self = this;//不能成功 不能影响compute
  42.                     // addEvent(btns,'click',function(e){
  43.                     // });
  45.                     // addEvent(btns,'click',this.compute.call(this));//执行了 不行
  46.                     // addEvent(btns,'click',this.compute);
  47.                     addEvent(btns, 'click', function (e) {
  48.                         // this.compute.call(_self);//不行
  49.                         _self.compute.call(_self, e);
  50.                     })
  51.                 },
  52.                 compute: function (e) {
  53.                     // console.log(e)
  54.                     // console.log('this',this)//this是btns对象，相当于btns调用
  55.                     // var val1 = _self.num1.value,
  56.                     //     val2 = _self.num2.value,
  57.                     //     btns = _self.btnGroup;
  59.                     var val1 = this.num1.value,
  60.                         tar = e.target || e.srcElement,
  61.                         val1 =Number(this.num1.value) ,
  62.                         val2 =Number( this.num2.value),
  63.                         btns = this.btnGroup,
  64.                         sign;
  65.                     sign = tar.getAttribute('data-sign');
  66.                     switch (sign) {
  67.                         case 'plus':
  68.                             console.log(val1+val2)
  69.                             break;
  70.                         case 'minus':
  71.                             console.log(val1-val2)
  72.                             break;
  73.                         case 'mul':
  74.                             console.log(val1*val2)
  75.                             break;
  76.                         case 'div':
  77.                             console.log(val1/val2)
  78.                             break;
  79.                         default:
  80.                             console.log('出错了')
  81.                             break;
  82.                     }
  83.                 }
  84.             }
  85.             window.Test = Test;
  86.         })();
  88.         new Test({
  89.             num1: document.getElementById('num1'),
  90.             num2: document.getElementById('num2'),
  91.             btnGroup: document.getElementsByClassName('btn-group')[0]
  92.         }).init();
  95.         // function addEvent(el, type, fn) {
  96.         //     // console.log(el);
  97.         //     if (el.addEventListener) {
  98.         //         //方法存在
  99.         //         el.addEventListener(type, fn, false);
  100.         //     } else if (el.attachEvent) {
  101.         //         el.attachEvent("on" + type, function () {
  102.         //             fn.call(el); //将this指向改为调用的本身
  103.         //         });
  104.         //     } else {
  105.         //         el["on" + type] = fn; //相当于el.on,例子el.onclick=func
  106.         //     }
  107.         // }
  108.     </script>
  109. </body>
  111. </html>