js经典题：拖拽一个div

draggable函数封装整个过程。因为通过设置left和top调整位置，所以需要div的position为absolute。

值得一提的是，代码在整个document上监听鼠标移动和松开，而不是拖拽元素。这是因为如果在元素上监听，拖拽的特别快时会导致元素监听不到mousemove和mouseup消息（鼠标移出了元素）。

查看效果：https://jsfiddle.net/lpjworkroom/Ldbsje5w/

function draggable(ele){
  ele.addEventListener('mousedown',start,false);
  let startX,startY;
  
  function start(event){
    startX=event.pageX;startY=event.pageY;
    document.addEventListener('mousemove',move,false);
    document.addEventListener('mouseup',up,false);
  }
  
  function move(event){
    let newX=event.pageX,
        newY=event.pageY;
    setElePos(newX-startX,newY-startY);
    startX=newX;startY=newY;
  }
  
  function up(event){
    document.removeEventListener('mousemove',move);
    document.removeEventListener('mouseup',up);
  }
  
  function setElePos(distX,distY){
      let pos=ele.getBoundingClientRect();
      ele.style.left=(pos.left+distX)+'px';
    ele.style.top=(pos.top+distY)+'px';
  }
}


/////////////////////////////////////////////
let box=document.getElementById('box'),
        box2=document.getElementById('box2');
draggable(box);
draggable(box2);