拖动弹窗效果实现-优快云博客

假期结束，继续学习！

拖动弹出框效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         *{margin:0;padding:0;}
 8         .box{
 9             width:400px;
10             height:300px;
11             border:5px solid #eee;
12             box-shadow:2px 2px 2px 2px #666;
13             position: absolute;
14             top:50%;
15             left:50%;
16             margin-top: -155px;
17             margin-left:-205px;
18 
19         }
20         .hd{
21             width:100%;
22             height:25px;
23             background-color: #3B90CD;
24             border-bottom:1px solid #369;
25             line-height: 25px;
26             color:white;
27             cursor: move;
28         }
29         #box_close{
30             float: right;
31             cursor: pointer;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="box" id="box">
37     <div class="hd" id="drop">注册信息   (可以拖拽)
38             <span id="box_close">【关闭】</span>
39     </div>
40     <div class="bd"></div>
41 </div>
42 </body>
43 </html>
44 <script>
45     var box = document.getElementById("box");
46     var drop = document.getElementById("drop");
47     startDrop(drop,box);  // 鼠标放到  drop    但是移动 是 box
48     function startDrop(current,move) {
49         current.onmousedown = function(event) {
50             var event = event || window.event;
51             var x = event.clientX - move.offsetLeft - 205;   // 记录当前盒子的x 位置
52             var y = event.clientY - move.offsetTop - 155;  //  // 记录当前盒子的y位置
53             document.onmousemove = function(event) {
54                 var event = event || window.event;
55                 move.style.left = event.clientX - x + "px";
56                 move.style.top = event.clientY - y + "px";
57                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
58             }
59 
60         }
61         document.onmouseup = function() {  // 鼠标弹起之后， 鼠标继续移动不应该操作
62             document.onmousemove = null;
63         }
64     }
65 
66 </script>

运行效果：