JavaScript 拖拽效果-动画

鼠标按下 onmousedown，onmousedown 里边鼠标移动 onmousemove，鼠标释放 onmouseup

var oDiv = document.getElementById('box');
var disX = disY = 0;

oDiv.onmousedown = function(ev){
  var ev = ev || event;
  disX = ev.offsetX;
  disY = ev.offsetY;

  document.onmousemove = function(ev){
    var ev = ev || event;
    var l = ev.clientX - disX;
    var t = ev.clientY - disY;

    // 边界限定
    if(l <= 0){
    l = 0;
    }else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth){
    l = document.documentElement.clientWidth - oDiv.offsetWidth;
    }

    if(t <= 0){
    t = 0;
    }else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight){
    t = document.documentElement.clientHeight - oDiv.offsetHeight;
    }

    // 吸附效果
    /* if(l <= 100){
    l = 0;
    }else if(l >= document.documentElement.clientWidth - oDiv.offsetWidth - 100){
    l = document.documentElement.clientWidth - oDiv.offsetWidth;
    }

    if(t <= 0){
    t = 0;
    }else if(t >= document.documentElement.clientHeight - oDiv.offsetHeight){
    t = document.documentElement.clientHeight - oDiv.offsetHeight;
    } */

    oDiv.style.left = l + 'px';
    oDiv.style.top = t + 'px';
  }

  document.onmouseup = function(){
    this.onmousemove = null;
    this.onmouseup = null;
  }
}