1. function drag(cla1,cla2,index){//鼠标可拖拽区域的dom，被拖拽的dom元素,索引
  2.      var disX = 0; //鼠标到dom元素左边距离
  3.      var disY = 0; //鼠标到dom元素上边距离
  4.      var oDiv1 = document.getElementsByClassName(cla1)[index];
  5.      var oDiv2 = document.getElementsByClassName(cla2)[index];
  6.      oDiv1.onmousedown = function(ev){
  7.           var ev = ev || window.event;
  8.           disX = ev.clientX - this.offsetLeft;
  9.           disY = ev.clientY - this.offsetTop;
  10.           document.onmousemove = function(ev){
  11.                oDiv2.style.left = ev.clientX - disX + 'px';
  12.                oDiv2.style.top = ev.clientY - disY + 'px';
  13.                if(ev.clientX - disX>=document.body.clientWidth-oDiv2.offsetWidth){ //当拖动dom超过页面右边边界
  14.                    oDiv2.style.left = document.body.clientWidth-oDiv2.offsetWidth + 'px';
  15.                }
  16.                if(ev.clientX - disX <= 0){ //当拖动dom超过左边边界
  17.                    oDiv2.style.left = 0;
  18.                }
  19.                if(ev.clientY - disY>=document.body.clientHeight-oDiv2.offsetHeight){ //当拖动dom超过页面下边边界
  20.                    oDiv2.style.top = document.body.clientHeight-oDiv2.offsetHeight + 'px';
  21.                }
  22.                if(ev.clientY - disY <= 0){//当拖动dom超过上边边界
  23.                    oDiv2.style.top = 0;
  24.                }
  25.          }
  26.          document.onmouseup = function(ev){ //鼠标抬起移除鼠标move事件
  27.               document.onmousemove = null;
  28.          }
  29.     }
  30.     return false;
    }
  31. var div = document.getElementsByClassName('div');
  32. for(let i = 0 ; i < divBox.length; i++ ){
  33.     drag('divHeader','divBox',i)
  34. }

版权声明：本文为wlzdf999原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wlzdf999/p/9371824.html