JS练习一：拖动对话框

最新推荐文章于 2025-07-18 10:38:22 发布

原创

最新推荐文章于 2025-07-18 10:38:22 发布 · 916 阅读

标签

#html #css #js #javascript

收录于

这篇博客介绍了如何使用JavaScript创建一个可拖动的对话框。通过监听mousedown、mousemove和mouseup事件，实现对话框的拖动功能。当鼠标在对话框title区域按下时记录初始位置，然后在mousemove事件中计算对话框的新位置，确保对话框跟随鼠标移动。

拖动对话框效果

点击CLICK HERE
在这里插入图片描述点击弹出登录界面对话框
鼠标按下即可拖动对话框
点击关闭按钮即可关闭对话框
代码：
CSS+HTML代码

<head>
   <style>
        * {
   
   
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }

        body {
   
   
            background-color: rgb(241, 241, 241);

        }

        .login-header {
   
   
            width: 142px;
            margin: 100px auto;
        }

        .login-header a {
   
   
            text-align: center;
            text-decoration: none;
            color: black;
            font-weight: 700;
            font-size: 20px;
            border: 2px solid #000;
            padding: 10px;
        }

        .login-header a:hover {
   
   
            color: darksalmon;
        }

        .login-box {
   
   
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: