拖拽案例 · JavaScript

``` <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:void(0)" id="register">注冊信息</a> </div> <div class="d-box" id="d_box"> <div class="hd" id="drop">注冊信息</div> <span id="box_close">關閉</span> <div class="bd"></div> </div> <script> var box = document.getElementById('d_box'); var drop = document.getElementById('drop'); drop.onmousedown = function (ev) { //當鼠標按下的時候,求鼠標在盒子重大位置 //鼠標在盒子中的位置 = 鼠標在頁面上的位置 - 盒子的位置 var mouseX = ev.pageX - box.offsetLeft; var mouseY = ev.pageY - box.offsetTop; //鼠標在文檔中移動 document.onmousemove = function (ev) { //當鼠標在頁面上移動的時候,求盒子的坐標 //盒子的坐標 = 鼠標當前在頁面中的位置 - 鼠標在盒子中的位置 var boxX = ev.pageX - mouseX; var boxY = ev.pageY - mouseY; box.style.left = boxX + 'px'; box.style.top = boxY + 'px'; } } //當鼠標彈起的時候,移除鼠標移動事件 document.onmouseup = function () { document.onmousemove = null; } //點擊關閉按鈕,隱藏盒子 var box_close = document.getElementById('box_close'); box_close.onclick = function () { box.style.display = 'none'; } </script> ```