拖拽效果，和调整窗口大小其实差不多，首先我们来看一张图。

    8. 拖拽效果 - 图1

    黑色的小圆点，是我们鼠标单击的点。

    红线的距离，可以通过e.pageX获得。

    蓝线的距离，可以通过可以移动的这个Div盒子的 offsetLeft拿到。

    此时我们就可以拿到，黄线的长度，当鼠标，也就是小圆点往右移动的时候，黄线是不会变的，而红线会变长，我们再次通过e.pageX拿到这个红线的长，我们通过红线的长度，减去不变的黄线的长度，得到的就是新的蓝线长度，也就是元素需要设置的left的值。

    1.首先准备HTML结构

    1.     <div class="dialog" id="canMove">
    2.         <div class="dialog-title" id="canDrag">
    3.             Title
    4.         </div>
    5.         <div class="content">
    7.         </div>
    8.     </div>

    2.添加一些样式

    1.         *{
    2.             margin: 0;
    3.             padding: 0;
    4.         }
    6.         .dialog{
    7.             width: 480px;
    8.             height: 300px;
    9.             background: #eee;
    10.             position: absolute;
    11.         }
    13.         .dialog-title{
    14.             width: 480px;
    15.             height: 40px;
    16.             background: #999;
    17.             cursor: move;
    18.             text-align: center;
    19.             line-height: 40px;
    20.         }
    1. 加上我们的 JavaScript 逻辑
    1.         const dragEle = document.querySelector('#canDrag');
    2.         const canMove = document.querySelector('#canMove');
    4.         dragEle.onselectstart = canMove.onselectstart =  () => {
    5.             return false;
    6.         } // 禁止被选中
    8.         let timer;
    10.         const mouse = {
    11.             x: 0,
    12.             y: 0
    13.         } // 记录当前鼠标移动的坐标点
    15.         const distance = {
    16.             topTop: 0,
    17.             topLeft: 0
    18.         } // 鼠标按下时候距离 CanMove 左上角的距离
    20.         document.onmousemove = (e) => {
    21.             mouse.x = e.pageX;
    22.             mouse.y = e.pageY;
    23.         } // 记录鼠标坐标
    25.         document.onmouseup = document.ondrag = (e) => {
    26.             clearInterval(timer);
    27.             timer = null;
    28.         } // 鼠标弹起，清空设置left的定时器
    30.         dragEle.onmousedown = (e) => {
    31.             distance.topLeft = e.pageX - canMove.offsetLeft;
    32.             distance.topTop = e.pageY - canMove.offsetTop;
    34.             timer = setInterval(setPosition, 10);
    35.         }
    37.         function setPosition(){
    38.             const maxX = (document.body.clientWidth || document.documentElement.clientWidth) - canMove.offsetWidth;
    39.             const maxY = (document.body.clientHeight || document.documentElement.clientHeight) - canMove.offsetHeight;
    41.             canMove.style.left = Math.max(Math.min((mouse.x - distance.topLeft), maxX), 0) + 'px';
    42.             canMove.style.top = Math.max(Math.min((mouse.y - distance.topTop), maxY), 0) + 'px'; 
    43.         }

    maxX 就是我们最多可以移动长度，它等于浏览器可视区的宽度，减去盒子的宽度。

    Math.min((mouse.x - distance.topLeft), maxX) 是为了让left不能超出可视区域右边

    Math.max 是为了让 left 不能为负数，也就是不能超出可视区的左边。