js拖拽

实现拖拽效果主要跟鼠标的三个事件有关：

• onmousedown : 选择要拖拽的元素
• onmousemove : 移动元素
• onmouseup : 释放元素

function drag(cla1,cla2,index){//鼠标可拖拽区域的dom，被拖拽的dom元素,索引
     var disX = 0; //鼠标到dom元素左边距离
     var disY = 0; //鼠标到dom元素上边距离
     var oDiv1 = document.getElementsByClassName(cla1)[index];
     var oDiv2 = document.getElementsByClassName(cla2)[index];
     oDiv1.onmousedown = function(ev){
          var ev = ev || window.event;
          disX = ev.clientX - this.offsetLeft;
          disY = ev.clientY - this.offsetTop;
          document.onmousemove = function(ev){
               oDiv2.style.left = ev.clientX - disX + 'px';
               oDiv2.style.top = ev.clientY - disY + 'px';
               if(ev.clientX - disX>=document.body.clientWidth-oDiv2.offsetWidth){ //当拖动dom超过页面右边边界
                   oDiv2.style.left = document.body.clientWidth-oDiv2.offsetWidth + 'px';
               }
               if(ev.clientX - disX <= 0){ //当拖动dom超过左边边界
                   oDiv2.style.left = 0;
               }
               if(ev.clientY - disY>=document.body.clientHeight-oDiv2.offsetHeight){ //当拖动dom超过页面下边边界
                   oDiv2.style.top = document.body.clientHeight-oDiv2.offsetHeight + 'px';
               }
               if(ev.clientY - disY <= 0){//当拖动dom超过上边边界
                   oDiv2.style.top = 0;
               }
         }
         document.onmouseup = function(ev){ //鼠标抬起移除鼠标move事件
              document.onmousemove = null;
         }
    }
    return false;
}
var divBox = document.getElementsByClassName('divBox');
for(let i = 0 ; i < divBox.length; i++ ){
    drag('divHeader','divBox',i)
}

当鼠标移动过快脱离oDiv1、oDiv2盒子,移动就会失去效果，所以移动事件（onmousemove）应该绑定在document上面，同时onmouseup也应该绑定在document上；当鼠标弹起移除move事件后，接的return false来使得禁止拖拽。