个人中心
gpt4 book ai didi

JavaScript实现拖动对话框效果的实现代码

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现拖动对话框效果的实现代码由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

代码实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang= "en" >
 
<head>
   <meta charset= "UTF-8" >
   <meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
   <title>Document</title>
   <style>
     * {
       margin: 0;
       top: 0;
     }
    
     .login-btn {
       width: 50px;
       height: 50px;
       line-height: 50px;
       font-size: 16px;
       text-align: center;
       margin: 100px auto;
       background-color: #1E1E1E;
       color: white;
       border-radius: 50%;
     }
    
     .login-btn:hover {
       cursor: pointer;
       background-color: #323233;
       box-shadow: 3px 3px 10px rgba(0, 0, 0, .3);
     }
    
     .bg {
       display: none;
       width: 100%;
       height: 100%;
       position: fixed;
       top: 0;
       left: 0;
       background-color: rgba(0, 0, 0, .4);
     }
    
     .login {
       display: none;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 300px;
       height: 200px;
       background-color: #1E1E1E;
       box-shadow: 4px 4px 15px rgba(0, 0, 0, .3);
     }
    
     .hd {
       position: relative;
       width: 100%;
       height: 26px;
       background-color: #323233;
     }
    
     .hd:hover {
       cursor: move;
     }
    
     .close {
       position: absolute;
       top: 3px;
       right: 5px;
       width: 20px;
       height: 20px;
       background-color: red;
       text-align: center;
       line-height: 20px;
       border-radius: 50%;
       box-shadow: 0 0 5px rgba(0, 0, 0, .7) inset;
     }
    
     .close:hover {
       background-color: yellow;
       cursor: pointer;
     }
   </style>
</head>
 
<body>
   <div class= "login-btn" >点击</div>
   <div class= "bg" ></div>
   <div class= "login" >
     <div class= "hd" >
       <div class= "close" >×</div>
     </div>
   </div>
   <script>
     // 获取元素
     var btn = document.querySelector( '.login-btn' );
     var bg = document.querySelector( '.bg' );
     var login = document.querySelector( '.login' );
     var close = document.querySelector( '.close' );
     var hd = document.querySelector( '.hd' );
 
     // 按下btn，弹出对话框
     btn.addEventListener( 'click' , function () {
       bg.style.display = 'block' ;
       login.style.display = 'block' ;
     });
 
     // 按下close，关闭对话框
     close.addEventListener( 'click' , function () {
       bg.style.display = 'none' ;
       login.style.display = 'none' ;
     });
 
     hd.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);
       });
     });
   </script>
</body>
 
</html>

实现效果:

点击点击按钮，弹出对话框。 按住对话框顶部并移动，实现拖动效果。 点击对话框右上角×，关闭对话框.

JavaScript实现拖动对话框效果的实现代码

到此这篇关于JavaScript实现拖动对话框效果的实现代码的文章就介绍到这了,更多相关js拖动对话框内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://www.cnblogs.com/jacklzx/archive/2020/10/12/13800811.html 。

最后此篇关于JavaScript实现拖动对话框效果的实现代码的文章就讲到这里了,如果你想了解更多关于JavaScript实现拖动对话框效果的实现代码的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： Linux Shell 正则表达式
文章推荐： 我们一起聊聊幂等设计
文章推荐： EasyC++，Protected关键字
文章推荐： 微信幽默表情包大全超级搞笑 舔狗没有情人节
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com