javaScript 拖拽效果

css：
div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;

    }

设置一个div元素

<div></div>

js代码：

var box = document.querySelector('div')     先获取div元素

    // 按下时，给div元素设置时间
    box.onmousedown = function(event){   
        var e = event || window.event;
        var x =e. offsetX  // 获取鼠标在元素内的x坐标
        var y = e.offsetY  // 获取鼠标在元素内的y坐标

        // 移动时
        document.onmousemove = function(event){   
            var e = event || window.event;
            var left = e.clientX - x  //获取鼠标在浏览器上的x坐标值 - 鼠标在元素内的x坐标值
            var top = e.clientY - y    // 获取鼠标在浏览器上的y坐标值 - 鼠标在元素内的y坐标值

            box.style.left = left + 'px'  // 给元素添加x坐标值
            box.style.top = top + 'px'     // 给元素添加y坐标值


        }

        // 松开时
        box.onmouseup = function(){
            document.onmousemove = null;  // 让移动事件为空
        }
    }