拖拽事件

style：

*{ margin:0; padding:0; } .one{ width:100px; height:100px; background: orange; cursor:move; position: absolute; } 
body:
<div class="one" id="box"></div>

script:
   box.onmousedown = function(e){
   var e = e || event;  //获取event对象
   var X = e.clientX - box.offsetLeft; //鼠标按下时到盒子的边界左边界的距离
   var Y = e.clientY - box.offsetTop; //鼠标按下时到盒子的边界上边界的距离；
   document.onmousemove = function(e){
    var e = e || event;
    var moveX = e.clientX - X; //盒子被移动后到浏览器左边界的距离
    var moveY = e.clientY - Y; //盒子被移动后到浏览器上边界的距离
    var winX = document.documentElement.clientWidth;  //可见窗口的宽
    var winH = document.documentElement.clientHeight; // 可见窗口的高；
    var maxW = winX - box.offsetWidth; //定义最大移动左距离（盒子被移动后到浏览器左边界的距离-盒子的宽度)
    var maxH = winH - box.offsetHeight; //定义最大移动垂直距离（盒子被移动后到浏览器左边界的距离-盒子的高度度）
     if (moveX < 0) {  //判断，当盒子的到浏览器左边界的距离小于0，
      moveX = 0;   //让它等于0,盒子活动范围仅浏览器内。
     }
     if (moveY < 0) {  //判断，当盒子的到浏览器上边界的距离小于0，
      moveY = 0;   //让它等于0，盒子活动范围仅浏览器内。
     }
     if (moveX > maxW) {  //当盒子移动左边界的距离大于最大的活动的范围，
      moveX = maxW;  //等于最大活动范围;
     }
     if(moveY > maxH){  //当盒子移动上边界的距离大于最大的活动的范围，
      moveY = maxH;  //等于最大活动范围;
     }
     box.style.left = moveX + "px"; //设置被移动后左边界的距离
     box.style.top = moveY + "px"; //设置被移动后上边界的距离
   }
  }
  document.onmouseup = function(){
   document.onmousemove = null;  //清空被移动的函数
  }