如何让盒子被鼠标拖动
<!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; padding: 0; } .nav { 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: 40%; left: 40%; background-color: white; /* 不让文字被选中 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .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">注册信息 (可以拖拽) <span id="box_close">【关闭】</span> </div> <div class="bd"></div> </div> <script> //获取数据 var boxs =document.getElementById('d_box') var drop = document.getElementById('drop') var boxclose = document.getElementById('box_close') //给drop添加按下事件 drop.onmousedown = function(e) { //鼠标在盒子中的距离 = 鼠标在页面中的距离 - 盒子在页面中的距离 var X = e.pageX - boxs.offsetLeft var Y = e.pageY - boxs.offsetTop //鼠标移动事件 document.onmousemove = function(e) { //这里用document 不用boxs 因为盒子的移动是在页面中 //移动后盒子距离浏览器边缘的距离 = 鼠标在页面中的距离 - 鼠标在盒子中的距离 boxsX = e.pageX - X boxsY = e.pageY - Y boxs.style.left = boxsX + 'px' boxs.style.top = boxsY + 'px' } } //松开鼠标之后不移动 drop.onmouseup = function () { document.onmousemove = null //松开鼠标之后我们不想让它再移动 那么就要把前面的清空 } //注册关闭按钮 boxclose.onclick = function() { boxs.style.display = 'none' //把它隐藏了 } </script> </body> </html>