Drag mode frame

case study:

1, clicking the popup, modal box will pop up, and a gray translucent shield layer.

2. Click the Close button, the modal box may be closed, and while closing the shutter gray translucent layer.

3, the mouse mode into the top row of the frame, can hold down the mouse drag mode frame is moved on the page. mousedown mousemove

4, release the mouse, you can stop the movement of the frame mode mouseup

5, the process of dragging the mouse movement, the left and the top value to obtain the latest value assigned frame mode, so that the modal box with the mouse can go.

6, the mouse down event triggered source is the top line, is the id of title

7, by subtracting the coordinates of the mouse coordinates of the mouse in the box, is the true position of the frame mode

8, the mouse is pressed, to obtain the coordinates of the mouse in the box

Mouse movement, let the modal coordinate frame is provided: the mouse coordinates by subtracting the coordinates of the mouse in the box to note down event to move the write event inside

Release the mouse: stop dragging, it is that it allows the mouse to move the event to lift

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input{
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<div class="login-header"><a href="javascript:;" id="link">点击，弹出登陆框</a></div>

<div  class="login">
    <div class="login-title">登陆会员
         <span><a href="javascript:;" id="closeBtn"
    <div
    </ div>> Close </a> </ span>
class="login-input-content">
        <div class="login-input">
            <label for="">用户名</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username">
        </div>
        <div class="login-input">
            <label for="" > </ div> <-! cap layer ->> Login password </ label> 
            <the INPUT of the type = " text " placeholder = " Please enter the login password " name = " info [password] " the above mentioned id = " password " > 
        </ div> 
    </ div> 

    <div class = " the Login -button " > <a href=" javascript:; "id=" login-submit "> Sign in and </a> </ div> 
</ div> 
    <div class = "login-bg"
</body>
</html>
<script>
    var Link document.querySelector = ( " #link " );
     var closeBtn and document.querySelector = ( " #closeBtn " );
     var Login = document.querySelector ( " .login " );
     var login_bg = document.querySelector ( " .login- BG " ); 

    //. 1, the frame and the display mode to achieve blocking layer and the hidden 
    link.addEventListener ( " the Click " , function () { 
        login.style.display = " block " ;
        login_bg.style.display = "block" ; 
    }) 
    CloseBtn.addEventListener ( " the Click " , function () { 
        login.style.display = " none " ; 
        login_bg.style.display = " none " ; 
    }) 

    // 2, the drag begins 
    var login_title = Document. querySelector ( " .login-title " ); 
    login_title.addEventListener ( " mouseDown " , function (E) {// when the mouse click, the mouse inside the box to obtain the coordinates
         vare.pageX- = X login.offsetLeft;
         var Y = e.pageY- login.offsetTop; 
        document.addEventListener ( " mouseMove " , Move); // when moving the mouse, to obtain the modal coordinate frame 
        function move (e) { 
            login.style.left = X +-e.pageX " PX " ; 
            login.style.top = e.pageY-Y + " PX " ; 
        } 
        document.addEventListener ( " mouseUp " , function () {// mouse shells since when releasing the mouse move event 
            document.removeEventListener ( " mouseMove " , the move); 
        }) 
    })
 </ Script>

Key Code:

Mouse Down - mouse movement - mouse up

login_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);
})

Guess you like