JavaScript——鼠标拖拽登录框

看效果

1.点击“点击，弹出登录框”。
2.点击“关闭”，关闭登录框

3.在title处，可按住拖拽

上代码

下面展示一些 内联代码片。

// html
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>

// javascript
<script>
    //1.获取元素
   var login  = document.querySelector(".login");
   var link  = document.querySelector("#link");
   var mask  = document.querySelector(".login-bg");
   var closeBtn  = document.querySelector("#closeBtn");
   var title = document.querySelector("#title");
   //2.当单击链接，弹出登录框
   link.addEventListener("click",function () {
       login.style.display = "block" ;
       mask.style.display = "block" ;
   })
    //3.点击关闭按钮，关闭登录框
    closeBtn.addEventListener("click" , function () {
        login.style.display = "none" ;
        mask.style.display = "none" ;
    })
    //4.在title栏，按下鼠标课移动登录框，松开时移动功能消失
    title.addEventListener("mousedown" ,function (e) {
        var x = e.pageX - login.offsetLeft;//用鼠标在页面上的坐标减去，盒子的坐标，得到鼠标在盒子内的坐标
        var y = e.pageY - login.offsetTop;
        document.addEventListener("mousemove",move);
        function move(e) {
            login.style.left = e.pageX - x + "px";//用鼠标在页面上的坐标减去盒子内的相对坐标，得到盒子的实时坐标
            login.style.top = e.pageY - y + "px";
        }
        document.addEventListener("mouseup" , function () {//当松开鼠标时，移动功能消失
            document.removeEventListener("mousemove",move);
        })
    })
</script>