<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} .are not{ height:30px; background: #036663; border-bottom:1px solid #369; line-height: 30px; padding-left:30px; } .nav a { color:#fff; text-align: center; font-size:14px; text-decoration: none; } .d-box{ width:400px; height:300px; border:5px solid #eee; box-shadow:2px 2px 2px 2px #666; position: absolute; top:50%; left:50%; margin-top: -155px; margin-left:-205px; } .hd{ width:100%; height:25px; background-color: #7c9299; border-bottom:1px solid #369; line-height: 25px; color:white; cursor: move; } #box_close{ float: right; cursor: pointer; } </style> </head> <body> <div class="nav"> <a href="javascript:;" id="register">注册信息</a> </div> <div class="d-box" id="d_box"> <div class="hd" id="drop"> Registration information (can be dragged and dropped) <span id="box_close">[Close]</span> </div> <div class="bd"></div> </div> </body> </html> <script> var box = document.getElementById("d_box"); var drop = document.getElementById("drop"); startDrop(drop,box); // The mouse is placed on the drop but the movement is the box function startDrop(current,move) { current.onmousedown = function (event) { var event = event || window.event; var x = event.clientX - move.offsetLeft - 205; // Record the x position of the current box var y = event.clientY - move.offsetTop - 155; // // Record the y position of the current box document.onmousemove = function (event) { var event = event || window.event; move.style.left = event.clientX - x + "px"; move.style.top = event.clientY - y + "px"; window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } document.onmouseup = function () { // After the mouse is up, the mouse should not continue to move document.onmousemove = null ; } }