稍等片刻,正在加载中...

js实现拖拽div 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>
        一切皆往事-js实现拖拽div
    </title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js">
    </script>
</head>
<body>
<div style="width:100px;height:100px;background:green;position:absolute;cursor:move;"
     id="zhenzi0322">
</div>
<script>
    //获取元素
    var dv = document.getElementById('zhenzi0322');
    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';
    }
</script>
</body>
</html>

效果图如下：
image

posted @ 2021-05-11 16:14  一切皆往事  阅读(162)  评论(0)    收藏  举报