JavaScript implements mouse control of free moving window

This article shares the specific code of JavaScript to realize mouse control of free window for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window moved with the mouse</title>
    <style>
        .mainDiv {
            width: 350px;
            height: 200px;
            border: 2px black solid;
            position: absolute;
        }

        .titleDiv {
            width: 350px;
            height: 30px;
            background-color: YellowGreen ;
            text-align: center;
            line-height: 30px;
        }

        .contentDiv {
            width: 350px;
            height: 170px;
            background-color: SandyBrown ;
            text-align: center;
        }
    </style>
</head>
<body>
<!--onmousedown: The event occurs when the mouse button is pressed; onmousemove: The event occurs when the mouse pointer moves to the specified object-->
<div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
        Title Bar</div>
    <div class="contentDiv">
        《Free window controllable by mouse》<br>
        Note: MainDiv cannot be moved before its position is set to absolute</div>
</div>
<script>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * Mouse press function, execute this function when the mouse is pressed*/
    function mouseDown() {
        //Get the mouse button value, 0 is the left mouse button; 1 is the mouse scroll button; 2 is the right mouse button if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //Set the mouse style titleDivObj.style.cursor = "move";
            //Set the shadow style of the main div mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //Get the current coordinates of the mouse let x = event.x;
            let y = event.y;
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //Call when the mouse moves document.onmousemove = mouseMove;

    /**
     * Press the mouse to move the function. When the mouse moves, the function is executed to move the div
     */
    function mouseMove() {
        if (mainDivObj != null) {
            //Get the coordinate position of the current mouse movement let x = event.x; //The x-axis coordinate of the mouse movement let y = event.y; //The y-axis coordinate of the mouse movement //Calculate the distance between the left and top of the div after it moves //Use the current coordinates to subtract the distance between the position of the mouse in the div and the left and top of the div let left = x - dx;
            let top = y - dy;
            //Set the new coordinate position of div mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     * Mouse release function, this function is executed when the mouse is released*/
    function mouseUp() {
        if (mainDivObj != null) {
            dx = null;
            dy = null;
            //Set the shadow style of div mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="pointer";
            titleDivObj = null;
        }
    }
</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:

Implementing four-window chat in C language
Implementation of Java sliding window maximum value
C# imitates QQ chat window
Visualization tool PyVista multi-threaded display of multiple windows example code
Pyqt5 implements window scaling and automatic scaling of controls within the window
Android widget basics coding example
Implementation of Selenium multi-window switching for Python crawlers
Java window detailed and comprehensive explanation

<<: Hadoop 3.1.1 Fully Distributed Installation Guide under CentOS 6.8 (Recommended)

>>: How to reasonably use the redundant fields of the database