高级js实现拖拽事件的思路、代码及知识点！

一、拖拽事件的实现思路：
1、鼠标按下时的事件：获取鼠标的位置，找到鼠标按下时到盒子的边界左边界的距离以及到盒子的边界上边界的距离；
2、鼠标移动事件：盒子被移动后到浏览器左边界的距离等于盒子定位的左边距；
盒子被移动后到浏览器上边界的距离等于盒子定位的上边距；
3、鼠标放开事件：清空被移动的函数；

二、实现代码如下：

css部分：
<style type="text/css">
  *{
   margin:0;
   padding:0;
  }
  .one{
   width:100px;
   height:100px;
   background: orange;
   cursor:move;
   position: absolute;
  }
 </style>

内容部分：
div class="one" id="box"></div>

script部分：
<script type="text/javascript">
  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;  //清空被移动的函数
  }
 </script>

三、知识点。
1、获取event对象：e = e || event;
2、clientX：鼠标指针的水平位置；
3、clientY：鼠标指针的垂直位置；
4、offsetLeft：当前元素左边界到它上级元素的左边距的距离；
5、offsetTop：当前元素上边界到它上级元素上边界的距离；
6、clientWidth：返回元素的可见宽度；
7、clientHeight：返回元素的课件高度；
5、鼠标按下的事件：onmousedown()；
6、鼠标移动时事件：onmousemove()；
7、鼠标放开事件：onmouseup()；