假期结束，继续学习！
拖动弹出框效果
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>
运行效果：
