问题：使用js制作一个可以根据鼠标拖动的盒子
    分析：

    • 这个盒子需要是绝对定位，可以改变left和top值
    • 需要鼠标按下触发事件，移动触发事件，鼠标松开触发事件
    • 按下时可以执行移动的事件，松开时不执行移动事件

    小知识

    1. e.clientX //获取横坐标，值是数字
    2. e.clientY //获取纵坐标，值是数字
    3. xxx.style.left  //这是id为xxx的盒子的left值，值带有 px
    4. parseInt(xxx.style.left)可以获取纯数字

    完整代码
    html

    1. <div id="xxx"></div>

    css

    1. #xxx{
    2.   border:1px solid red;
    3.   height: 100px;
    4.   width: 100px;
    5.   position:absolute;
    6.   left: 0;
    7.   top: 0;
    8. }

    js代码

    1. var dragging=false
    2. var position = null
    3. xxx.addEventListener('mousedown',function(e){
    4.    dragging=true
    5.   //获取初始位置
    6.    position = [e.clientX,e.clientY]
    7. });
    8. document.addEventListener('mousemove',function(e){
    9.   //如果按下了鼠标则开始执行移动
    10.   if(dragging){
    11.     var x =e.clientX;
    12.     var y = e.clientY;
    13.     var deltaX = x-position[0];  
    14.     var deltaY = y-position[1];
    15.     //有可能left值为null,parseInt是为了获取纯数字
    16.     var left = parseInt(xxx.style.left || 0);
    17.     var top = parseInt(xxx.style.top || 0)
    18.     //初始位置+移动距离+'px'
    19.      xxx.style.left=left + deltaX+"px";
    20.      xxx.style.top=top + deltaY+"px";
    21.     //将移动后的位置设置为初始位置
    22.     position=[x,y]
    23.   }
    24. })
    25. document.addEventListener('mouseup',function(e){
    26.   //松开鼠标后不再执行移动事件
    27.   dragging=false
    28. })

    使用document是为了防止鼠标移动过快而盒子跟不上

    展示效果和全部代码