javascript 拖拽移动

佚名 6年前 (2019-04-25) 随笔 1251人围观抢沙发百度已收录

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            width: 300px;
            height: 300px;
            background-color: rgba(0, 0, 0, .3);
            display: none;
        }

        h1 {
            position: relative;
            text-align: center;
            margin-bottom: 50px;
            margin-top: 0;
            color: white;
            cursor: move;
        }

        h1 a {
            position: absolute;
            top: 2px;
            right: 2px;
            font-size: 12px;
        }

        input {
            width: 200px;
            height: 30px;
            border: 0;
            outline: none;
            font-size: 14px;
        }

        span {
            cursor: pointer;
        }
    </style>
</head>
<body>
<span>点击登陆</span>
<div>
    <h1>登陆中心
        <a href="javascript:">关闭</a>
    </h1>
    　账户名：<input type="text">
    <p></p>
    　密　码：<input type="password">
</div>
<script>
    var box1 = document.querySelector('div');
    var box = document.querySelector('h1');
    var clos = document.querySelector('a');
    var open = document.querySelector('span');
    clos.addEventListener('click', function () {  // 点击关闭 隐藏 登录框
        box1.style.display = 'none';
    });
    open.addEventListener('click', function () {  // 点击登陆 显示 登录框
        box1.style.display = 'block';
    });
    var x = 0;
    var y = 0;
    box.addEventListener('mousedown', function (e) {  // 注册鼠标按键按下事件
        x = e.pageX - box1.offsetLeft;    // 计算出 鼠标在盒子内部的 X坐标
        y = e.pageY - box1.offsetTop;    // 计算出 鼠标在盒子内部的 Y坐标
        document.addEventListener('mousemove', move);  // 注册鼠标移动事件

        function move(e) {
            box1.style.left = e.pageX - x + 'px';  // 计算出大盒子的X坐标 并赋值给left
            box1.style.top = e.pageY - y + 'px';  // 计算出大盒子的Y坐标 并赋值给right
        }

        document.addEventListener('mouseup', function () { // 注册鼠标按键弹起事件
            document.removeEventListener('mousemove', move)  // 移除鼠标移动事件
        })
    });

</script>
</body>
</html>