鼠标拖动DIV元素 - 雨林笔记

- div

- css

#dv {
    	width:100px;
    	height:100px;
    	background-color:blue;
    	border-radius:50%;
    	position:absolute;
     }

- js

//获取元素
        var dv = document.getElementById('dv');
        var x = 0;
        var y = 0;
        var l = 0;
        var t = 0;
        var isDown = false;
        //鼠标按下事件
        dv.onmousedown = function(e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;
    
        //获取左部和顶部的偏移量
        l = dv.offsetLeft;
        t = dv.offsetTop;
        //开关打开
        isDown = true;
        //设置样式  
        dv.style.cursor = 'move';
     }
     //鼠标移动
     window.onmousemove = function(e) {
        if (isDown == false) {
            return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);
    
        dv.style.left = nl + 'px';
        dv.style.top = nt + 'px';
     }
     //鼠标抬起事件
     dv.onmouseup = function() {
        //开关关闭
        isDown = false;
        dv.style.cursor = 'default';
     }