JavaScript Implementation of Drag and Drop Function of Netease Cloud Music Web Site Logon Window

Posted by stan801003 on Mon, 03 Jun 2019 00:29:36 +0200

Explain

You may find that there are many websites whose login windows or login boxes can be dragged, and even their site prompt boxes can be dragged. You may be interested in the implementation of this function, so this article can help you! Specific website examples take Netease Cloud Music Web site as an example, the specific effect is as follows:

Analysis of Drag-and-Drop Principle of Login Window Implemented by JavaScript

Presuppose that the login box to be implemented allows clicking the mouse to get the specific location of the drag event is the title block of the login box, which is the black part of the login block shown in the following figure, and assume that the red cross switch is the mouse state:

  • The onmousedown event is triggered when the mouse is allowed to click the mouse to get the drag event area and click the mouse

  • Get the specific location of the mouse when allowing clicks to get clicks in the drag event area

  • When the mouse moves, it changes the position of the upper left corner of the login window (that is, the coordinate point) from the upper left corner of the page's visual area, and then the login window moves, thus realizing the drag-and-drop function of the login window.

    • Trigger onmousemove event when the mouse moves

  • When the mouse is raised, the onmouseup event is triggered

    • Release onmousemove event

    • Release onmouseup event itself

The above process is a complete login window drag and drop process, but we should pay attention to the following points:

  1. Binding onmousemove events for document when dragging and moving login windows, rather than allowing clicking on the mouse to get the drag event area

    • Why? If you only bind onmousemove to allow clicking on the mouse to get drag event area, when the mouse moves fast, it will cause event binding loss, but you can verify it.

    • The following picture shows that it's wrong to bind onmousemove to an area that allows you to click the mouse to get drag events.

    • Here's an example of an event that binds onmousemove to a document, which is perfect because you won't lose the event binding anyway you drag it.

  2. Lifting up the mouse also binds onmouseup events for document, rather than allowing clicking on the mouse to get the drag event area

    • Why? If you only bind onmouseup events to allow you to click on the mouse to get drag event areas, you will find that when the mouse moves out of the document visual area, you will raise the click mouse button and you will find that it can still move when you move the mouse again, which is not normal, right? When document is bound to onmouseup event, it can solve this weird problem very well.

    • The following picture shows that it is wrong to bind onmouseup to allow clicking on the mouse to get the drag event area.

    • The following is an event that binds onmouseup to document, which is perfect

    • But you'll find that you can't drag it back. It's a question of optimization, which I'll talk about later.

Drag-and-drop effect of login window implemented by JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Dragging</title>
    <style>
        /* public style start */
        * { margin: 0; padding: 0; }
        body, textarea, select, input, button {font-size: 12px;color: white;font-family: Arial, Helvetica, sans-serif;-webkit-text-size-adjust: none;}
        .fl-l { float: left }
        .fl-r { float: right }
        .clearfix:after {visibility:hidden;display:block;font-size:0;content:'.';clear:both;height:0;}
        .clearfix {*zoom:1;}
        /* public style end */

        /* dialog window style start */

        /* dialog window main */
        #dialog {
            height: 200px;
            width: 400px;
            background-color: #EAF6DB;
            border: 1px solid lightslategray;
            position: absolute;
            top: 200px;
            left: 400px;
        }

        /* dialog window title section */
        .dialog-title {
            height: 40px;
            line-height: 40px;
            background-color: #3a3333;
            cursor: move;
        }

        /* dialog window title inner detail */
        .login, .close {
            display: inline-block;
            margin: 0 15px;
        }
    </style>
    <script>
        window.onload = function () {
            // Get DOM elements
            var oDialog_title = document.getElementById( 'dialog-title' );  // Allow clicking the mouse to get the drag event area
            var oDialog = oDialog_title.parentNode; // Login window

            // Initialize the default mouse position
            var iDisX = 0;
            var iDisY = 0;

            // Add the mouse-down event `onmousedown'for the obtained DOM element`
            oDialog_title.onmousedown = function ( ent ) {
                // Save mouse event objects
                var oEvent = ent || event;

                // Distance calculation mouse position in pop-up box
                iDisX = oEvent.clientX - oDialog.offsetLeft;    // Mouse X-axis position-left margin outside pop-up box X
                iDisY = oEvent.clientY - oDialog.offsetTop;     // Mouse Y-axis Position-Outside and Upper Margin of Pop-up Box Y

                // Click on the pop-up box and drag the mouse to move the pop-up box.
                document.onmousemove = function ( ent ) {
                    // Save mouse event objects
                    var oEvent = ent || event;

                    // Change the position of the pop-up box when the mouse moves
                    oDialog.style.left = oEvent.clientX - iDisX + 'px';
                    oDialog.style.top = oEvent.clientY - iDisY + 'px';
                };

                // When you click the mouse to drag the pop-up box and raise the mouse
                document.onmouseup = function () {
                    // Clear the mobile event of the pop-up box and itself
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

                // Prevent default events. If you don't add this to prevent default events, a focus-grabbing cursor will flicker all the time under firefox, and a drag-and-shadow will occur below 3.0.
                return false;
            };


        };
    </script>
</head>
<body>
    <!-- Suppose this DIV It's just a login window. -->
    <div id="dialog">
        <div id="dialog-title" class="dialog-title clearfix">
            <span class="fl-l login">Sign in</span>
            <span class="fl-r close">X</span>
        </div>
    </div>
</body>
</html>

This is a simple drag-and-drop process implemented with a simple DIV simulation login window.

Implementation of dragging and pulling effect of login window in JavaScript

You may have noticed that the biggest difference between this login window and Netease Cloud Music is that it can drag out the visible area of the document. It can even drag into the invisible area of the document. It can never be dragged back, just as the ex-girlfriend who broke up and married never comes back.

(Okay, is it okay to find someone to cry and faint in the toilet at the same time to remember those words [what you can't get is always in turmoil, what you lose is always in remembrance, what you have around you is always a landscape,...]]). All these are just as good as teasing moments when they don't happen?

In fact, this is also a pit left above, now to optimize the filling, is to achieve the same effect as the Netease cloud music website login window, prohibit the login window dragging out of the document visual area! The following is the filling time, non-combatants please leave the scene quickly.

JavaScript Implements Drag-and-Drop Optimized Filling of Logon Window

In fact, the idea is very simple. When the four edges of the login window coincide with the one of the document windows, the value of the outer margin of the one side of the login window is equal to that of the overlapping document. That's the right thing to do.

  • Just modify the current location of the documnet.onmousemove event method login window!

// Change the position of the pop-up box when the mouse moves
oDialog.style.left = oEvent.clientX - iDisX + 'px';
oDialog.style.top = oEvent.clientY - iDisY + 'px';

  • Rewrite as follows:

// Optimize Filling - Forbid `Logon Window'`Drag and Drop out Document Visual Area, Save `Logon Window' in Document Specific Location
var iCurrentDialogDisLift = oEvent.clientX - iDisX; // ` Login window `Current location on X axis specific value
var iCurrentDialogDisTop = oEvent.clientY - iDisY;  // ` Login window `Current position on Y axis specific value

// Check whether the current `logon window `X axis is on the left or right side of the document's visual area
if ( iCurrentDialogDisLift < 0 ) {
    iCurrentDialogDisLift = 0;
} else if ( iCurrentDialogDisLift > document.documentElement.clientWidth - oDialog.offsetWidth  ) {
    // Current document X-axis visual area size includes left and right border width - `login window `X-axis area size includes left and right border width
    iCurrentDialogDisLift = document.documentElement.clientWidth - oDialog.offsetWidth;
}

// Check whether the current `logon window `Y axis is at the top or bottom of the document visual area
if ( iCurrentDialogDisTop < 0 ) {
    iCurrentDialogDisTop = 0;
} else if ( iCurrentDialogDisTop > document.documentElement.clientHeight - oDialog.offsetHeight ) {
    // Current document Y axis visual area size includes upper and lower border width - `login window `Y axis area size includes upper and lower border width
    iCurrentDialogDisTop = document.documentElement.clientHeight - oDialog.offsetHeight;
}

// Change the position of the pop-up box when the mouse moves
oDialog.style.left = iCurrentDialogDisLift + 'px';
oDialog.style.top = iCurrentDialogDisTop + 'px';

JavaScript Implements Drag-and-Drop Optimizing Filling Full Document in Logon Window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Dragging</title>
    <style>
        /* public style start */
        * { margin: 0; padding: 0; }
        body, textarea, select, input, button {font-size: 12px;color: white;font-family: Arial, Helvetica, sans-serif;-webkit-text-size-adjust: none;}
        .fl-l { float: left }
        .fl-r { float: right }
        .clearfix:after {visibility:hidden;display:block;font-size:0;content:'.';clear:both;height:0;}
        .clearfix {*zoom:1;}
        /* public style end */

        /* dialog window style start */

        /* dialog window main */
        #dialog {
            height: 200px;
            width: 400px;
            background-color: #EAF6DB;
            border: 1px solid lightslategray;
            position: absolute;
            top: 200px;
            left: 400px;
        }

        /* dialog window title section */
        .dialog-title {
            height: 40px;
            line-height: 40px;
            background-color: #3a3333;
            cursor: move;
        }

        /* dialog window title inner detail */
        .login, .close {
            display: inline-block;
            margin: 0 15px;
        }
    </style>
    <script>
        window.onload = function () {
            // Get DOM elements
            var oDialog_title = document.getElementById( 'dialog-title' );  // Allow clicking the mouse to get the drag event area
            var oDialog = oDialog_title.parentNode; // Login window

            // Initialize the default mouse position
            var iDisX = 0;
            var iDisY = 0;

            // Add the mouse-down event `onmousedown'for the obtained DOM element`
            oDialog_title.onmousedown = function ( ent ) {
                // Save mouse event objects
                var oEvent = ent || event;

                // Distance calculation mouse position in pop-up box
                iDisX = oEvent.clientX - oDialog.offsetLeft;    // Mouse X-axis position-left margin outside pop-up box X
                iDisY = oEvent.clientY - oDialog.offsetTop;     // Mouse Y-axis Position-Outside and Upper Margin of Pop-up Box Y

                // Click on the pop-up box and drag the mouse to move the pop-up box.
                document.onmousemove = function ( ent ) {
                    // Save mouse event objects
                    var oEvent = ent || event;

                    // Optimize Filling - Forbid `Logon Window'`Drag and Drop out Document Visual Area, Save `Logon Window' in Document Specific Location
                    var iCurrentDialogDisLift = oEvent.clientX - iDisX; // ` Login window `Current location on X axis specific value
                    var iCurrentDialogDisTop = oEvent.clientY - iDisY;  // ` Login window `Current position on Y axis specific value

                    // Check whether the current `logon window `X axis is on the left or right side of the document's visual area
                    if ( iCurrentDialogDisLift < 0 ) {
                        iCurrentDialogDisLift = 0;
                    } else if ( iCurrentDialogDisLift > document.documentElement.clientWidth - oDialog.offsetWidth  ) {
                        // Current document X-axis visual area size includes left and right border width - `login window `X-axis area size includes left and right border width
                        iCurrentDialogDisLift = document.documentElement.clientWidth - oDialog.offsetWidth;
                    }

                    // Check whether the current `logon window `Y axis is at the top or bottom of the document visual area
                    if ( iCurrentDialogDisTop < 0 ) {
                        iCurrentDialogDisTop = 0;
                    } else if ( iCurrentDialogDisTop > document.documentElement.clientHeight - oDialog.offsetHeight ) {
                        // Current document Y axis visual area size includes upper and lower border width - `login window `Y axis area size includes upper and lower border width
                        iCurrentDialogDisTop = document.documentElement.clientHeight - oDialog.offsetHeight;
                    }

                    // Change the position of the pop-up box when the mouse moves
                    oDialog.style.left = iCurrentDialogDisLift + 'px';
                    oDialog.style.top = iCurrentDialogDisTop + 'px';
                };

                // When you click the mouse to drag the pop-up box and raise the mouse
                document.onmouseup = function () {
                    // Clear the mobile event of the pop-up box and itself
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

                // Prevent default events. If you don't add this to prevent default events, a focus-grabbing cursor will flicker all the time under firefox, and a drag-and-shadow will occur below 3.0.
                return false;
            };
        };
    </script>
</head>
<body>
    <!-- Suppose this DIV It's just a login window. -->
    <div id="dialog">
        <div id="dialog-title" class="dialog-title clearfix">
            <span class="fl-l login">Sign in</span>
            <span class="fl-r close">X</span>
        </div>
    </div>
</body>
</html>

JavaScript realizes dragging and pulling of login window to optimize the concrete effect after filling a pit

Above is the concrete process to achieve the same dragging effect with the login window of Netease Cloud Music Web Station.

I hope this article will be helpful to your work and study.

How can I thank you if you think it's good? Damn it! Praise it!

Good Luck! from warnerwu at 2017.08.19 AM

Topics: Javascript Windows Mobile Firefox

Hot Topics

©2024 Programmer Think