Native JS to achieve draggable login box

This article shares a draggable login box implemented with native JS, the effect is as follows:

The implemented code is as follows:

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <title>Native JS to implement draggable login box</title>
 
    <style type="text/css">
        body {
            /* Background image */
            background: url(images/0.png) #fff top center no-repeat;
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            font-family: "Microsoft YaHei";
        }
 
        .link {
            text-align: right;
            line-height: 20px;
            padding-right: 40px;
        }
 
        .ui-dialog {
            width: 380px;
            height: auto;
            display: none;
            position: absolute;
            z-index: 9000;
            top: 0px;
            left: 0px;
            border: 1px solid #D5D5D5;
            background: #fff;
        }
 
        .ui-dialog a {
            text-decoration: none;
        }
 
        .ui-dialog-title {
            height: 48px;
            line-height: 48px;
            padding: 0px 20px;
            color: #535353;
            font-size: 16px;
            border-bottom: 1px solid #efefef;
            background: #f5f5f5;
            cursor: move;
            user-select: none;
        }
 
        .ui-dialog-closebutton {
            width: 16px;
            height: 16px;
            display: block;
            position: absolute;
            top: 12px;
            right: 20px;
            /* Close the login box icon*/
            background: url(images/1.png) no-repeat;
            cursor: pointer;
 
        }
 
        .ui-dialog-closebutton:hover {
            /* Close the login box icon when the mouse hovers */
            background: url(images/2.png);
        }
 
        .ui-dialog-content {
            padding: 15px 20px;
        }
 
        .ui-dialog-pt15 {
            padding-top: 15px;
        }
 
        .ui-dialog-l40 {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
 
        .ui-dialog-input {
            width: 100%;
            height: 40px;
            margin: 0px;
            padding: 0px;
            border: 1px solid #d5d5d5;
            font-size: 16px;
            color: #c1c1c1;
            text-indent: 25px;
            outline: none;
        }
 
        .ui-dialog-input-username {
            /* Input username icon*/
            background: url(images/4.png) no-repeat 2px;
        }
 
        .ui-dialog-input-password {
            /* Enter password icon*/
            background: url(images/3.png) no-repeat 2px;
        }
 
        .ui-dialog-submit {
            width: 100%;
            height: 50px;
            background: #3b7ae3;
            border: none;
            font-size: 16px;
            color: #fff;
            outline: none;
            text-decoration: none;
            display: block;
            text-align: center;
            line-height: 50px;
        }
 
        .ui-dialog-submit:hover {
            background: #3f81b0;
        }
 
        .ui-mask {
            width: 100%;
            height: 100%;
            background: #000;
            position: absolute;
            top: 0px;
            height: 0px;
            z-index: 8000;
            opacity: 0.4;
 
            /*Compatible with lower versions of IE*/
            filter: Alpha(opacity=40);
        }
    </style>
</head>
 
<body>
 
    <div class="link">
        <a href="javascript:showDialog();" >Login</a>
    </div>
 
    <!-- Set a background mask layer to prevent mouse selection events-->
    <div class="ui-mask" id="mask" onselectstart="return false"></div>
 
    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
 
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            Login Pass<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
        </div>
 
        <div class="ui-dialog-content">
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" value="Mobile phone/email/username" />
            </div>
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-password" type="input" value="password" />
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >Forgot Password</a>
            </div>
 
            <div>
                <a class="ui-dialog-submit" href="#" >Login</a>
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >Register Now</a>
            </div>
        </div>
    </div>
 
 
    <script type="text/javascript">
 
        //Declare the method to get the element object function $(id) { return document.getElementById(id); }
 
        //Declare the automatic centering element method (el = Element)
        function autoCenter(el) {
 
            //Get the width and height of the visible area of the web page var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;
 
            //Get the actual width and height of the passed element var elW = el.offsetWidth;
            var elH = el.offsetHeight;
 
            //Set the element's left to the width of the visible area minus its own width divided by 2, and the same for top el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';
 
        }
 
        //Automatically expand elements to the entire display area function fillToBody(el) {
 
            //Set the width and height of the current element to the width and height of the visible area el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }
 
        //Set the initial value of the mouse in the X and Y directions to 0
        var mouseOffsetX = 0;
        var mouseOffsetY = 0;
 
        //Whether it can be dragged var isDraging = false;
 
        // Mouse event 1 - calculate the coordinates of the mouse relative to the upper left corner of the dragged element, and mark the element as movable $('dialogDrag').addEventListener('mousedown', function (e) {
 
            //Compatible with IE mouse event mechanism var e = e || window.event;
 
            //The mouse offset is equal to the X coordinate when the mouse is pressed in the current event minus the position of the login floating layer relative to the left side of the page mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
 
            //The mouse offset is equal to the Y coordinate when the mouse is pressed in the current event minus the position of the login floating layer relative to the top of the page mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
 
            //Set the draggable flag to true;
            isDraging = true;
 
        })
 
        // Mouse event 2 - when the mouse moves, check whether the element is marked as movable.
        //If yes, update the element's position to the current mouse position (minus the offset obtained in the first step)
        document.onmousemove = function (e) {
 
            //Compatible with IE mouse event mechanism var e = e || window.event;
 
            //Get the position of the mouse on the current page (upper left corner of the webpage), e.pageX and e.pageY have different values when the mouse is pressed var mouseX = e.pageX;
            var mouseY = e.pageY;
 
            //Record the x and y coordinates when the mouse moves var moveX = 0;
            var moveY = 0;
 
 
            //If dragging is currently possible if (isDraging === true) {
 
                //The position of the dragged element is equal to the position of the mouse relative to the page minus the position of the mouse relative to the upper left corner of the dragged element moveX = mouseX - mouseOffsetX;
                moveY = mouseY - mouseOffsetY;
 
                //Get the maximum width and height of the page (note the difference between clientWidth and offsetWidth)
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
 
                //The width and height of the floating layer object var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;
 
                //Calculate the maximum draggable value var maxX = pageWidth - dialogWidth;
                var maxY = pageHeight - dialogHeight;
 
                //Make a judgment to prevent dragging out of the allowed range moveX = Math.min(maxX, Math.max(0, moveX));
                moveY = Math.min(maxY, Math.max(0, moveY));
 
                //Set the new value of the drag element $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';
 
            }
 
 
        }
 
        //Mouse event 3 - when the mouse is released, mark the element as immovable document.onmouseup = function () {
            isDraging = false;
        }
 
        //Show the login box function showDialog() {
            $('dialogMove').style.display = 'block';
            $('mask').style.display = 'block';
 
            //The login box is centered autoCenter($('dialogMove'));
 
            //Set the mask layer to fill the display area fillToBody($('mask'))
 
 
        }
        //Hide the login box function hideDialog() {
            $('dialogMove').style.display = 'none';
            $('mask').style.display = 'none';
        }
 
        //The processing function when changing the window size window.onresize = function () {
 
            //The login box is centered autoCenter($('dialogMove'));
 
            //If the login box is displayed, execute the mask layer display function if ($('dialogMove').style.display === 'block') {
                fillToBody($('mask'))
            }
 
 
        }
    </script>
</body>
 
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: