JS 元素拖拽功能

原生js实现dom元素拖拽

//var tool = document.getElementById("tool");    // 获取到要拖拽的元素
	//	drag(tool);    // 调用自己封装的拖拽函数
    
  function drag(obj){
      obj.onmousedown = function(e){
          var e = e || window.event;    // 兼容 IE
          var divX = e.clientX - this.offsetLeft;
          var divY = e.clientY - this.offsetTop;
          
          if(divX > 470 || divY > 55){ //限制不可拖拽边缘
        	  return ;
          }
          
          if(obj.setCapture){
              obj.setCapture();    // 修复低版本 IE bug
          }
          document.onmousemove = function(e){
              var e = e || window.event;
              var disX = e.clientX - divX;
              var disY = e.clientY - divY;
              
              // 控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条或拖出可视区域
              if ( disX < 0 ) {
                  disX = 0;
              } else if ( disX > document.documentElement.clientWidth - obj.offsetWidth ) {
                  disX = document.documentElement.clientWidth - obj.offsetWidth;
              }
              
              if ( disY < 0 ) {
                  disY = 0;
              } else if ( disY > document.documentElement.clientHeight - obj.offsetHeight ) {
                  disY = document.documentElement.clientHeight - obj.offsetHeight;
              }
              // 移动时重新得到物体的距离，解决拖动时出现晃动现象  
              obj.style.top = disY + "px";
              obj.style.left = disX + "px";
              
              document.onmouseup = function(){    // 鼠标抬起时不再移动  
                  // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                  document.onmousedown = document.onmousemove = null;
                  if( obj.releaseCapture ){
                      obj.releaseCapture();    // 修复低版本 IE bug
                  }
              }
          }
      }
  }