第47天：拖动弹出框
假期结束，继续学习！
拖动弹出框效果
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>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读