十、拖拽模型

#box {
    width: 100px;
    height: 100px;
    background-color: red;
    /* 因为是要拖拽，改变的是元素的定位值，所以要绝对定位 */
    position: absolute;
    left: 0;
    top: 0;
}

// 获取元素
var box = document.getElementById("box");

// 要求：当鼠标按下box的时候并移动鼠标，元素要跟随鼠标移动
// 给box添加mousedown事件
box.onmousedown = function(e){
    // 获取鼠标位于视口中的位置
    var x = e.clientX;
    var y = e.clientY;

    // 获取box的定位值 计算后的样式  用于防止第二次点击时，box返回原位置
    var left = parseInt(getComputedStyle(box)["left"]);
    var top = parseInt(getComputedStyle(box)["top"]);
    console.log(left, top);

    // 给box添加mousemove事件 在document范围内 否则鼠标快速滑动是超出box范围 运动停止
    document.onmousemove = function(e){
        // 获取鼠标移动后的位置
        var m_x = e.clientX;
        var m_y = e.clientY;

        // 改变box的定位值 用鼠标移动后的距离 - 鼠标移动之前的距离 + 鼠标当前位置 
        box.style.left = m_x - x  + left + "px";
        box.style.top = m_y - y  + top + "px";
    }
}

// 当鼠标抬起，不让box再跟随鼠标移动了
document.onmouseup = function(){
    // 取消mousemove事件
    document.onmousemove = null;
}