JavaScript實現(xiàn)拖拽盒子效果

更新時間：2020年02月06日 10:37:45 作者：空谷丶幽蘭

這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)拖拽盒子效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)拖拽盒子效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：

1.單擊關(guān)閉，關(guān)閉盒子
2.點擊左上方‘點擊注冊'，打開盒子
3.鼠標(biāo)放在盒子上方藍(lán)色區(qū)域顯示十字
4.點擊鼠標(biāo)不松開就可移動盒子
5.松開鼠標(biāo)圖片暫停

實現(xiàn)步驟：

1.在頁面最上方設(shè)置一個盒子，里面有一個超鏈接，超鏈接里面設(shè)置href="javascript:void(0);"，再點擊時不打開網(wǎng)頁。

2.再設(shè)置一個可以拖拽的盒子，盒子嵌套一個藍(lán)色盒子為的最上方的藍(lán)色區(qū)域，藍(lán)色盒子里面兩個span標(biāo)簽，里面寫‘關(guān)閉'和‘可拖拽'。

3.給‘關(guān)閉'的盒子注冊點擊事件，點擊后，拖拽盒子樣式為none，(不顯示)
給最上方的超鏈接設(shè)置點擊事件，點擊后，拖拽盒子樣式為block，(顯示)

4.給上方藍(lán)色盒子設(shè)置onmousedown(鼠標(biāo)點擊事件)，同時獲取鼠標(biāo)點擊位置
離拖拽盒子的距離，為mouseLeft和mouseTop

5.給頁面（document）設(shè)置onmousemove事件讓鼠標(biāo)的位置分別減去mouseLeft和mouseTop，得到盒子左上角隨鼠標(biāo)移動的坐標(biāo)，再將坐標(biāo)賦值給拖拽盒子

6.最后設(shè)置onmouseup事件，鼠標(biāo)松開時頁面不移動。即document.onmousemove = null

實現(xiàn)細(xì)節(jié)：

1.讓拖拽盒子居中顯示：top:50%; left: 50%;
       margin-left :-155px; margin-top:-155px;
      ( margin-left: -(盒子寬度的一半); 這里盒子寬度300px邊框為5px,總寬度310px，
      所以設(shè)置-155px， margin-top:-(盒子高度的一半)，和寬度同理）

2.var evt = event || window.event;兼容性寫法。

代碼：

<!DOCTYPE html>
<html>
<head>
 <title>拖拽盒子</title>
 <style type="text/css">
 *{
 margin:0px;
 padding:0px;
 }
 .dropBox{
 width:300px;
 height:300px;
  top:50%;
  left:50%;
  margin-left: -155px;
  margin-top: -155px;
  display: block;
 border: 5px solid #aaa;
 position: absolute;
 }

 .nav{
 width: 100%;
 height:30px;
 background-color: blue;
 opacity: 0.6;
 }
 .nav a{
 font-size:15px;
 color:white;
 }
 .dropBox .box{
 width:300px;
 height:30px;
 position: absolute;
 left:0px;
 top:0px;
 background-color: darkblue;
 opacity: 0.8;
 cursor:move;
 }
 .close{
 float: right;
 color:white;
 font-size: 15px;
 cursor: pointer;
 }
 .move{
 color:white;
 font-size: 15px;
 }
 </style>
 <script type="text/javascript">
 function $(id){
 return document.getElementById(id);
 }
 window.onload = function(){
 var register = $('register');
 var dropBox = $('dropDiv');
 var box = $('box');
 var box2 = $('box2');
 box2.onclick = function(){
  dropBox.style.display = 'none';
 }
 register.onclick = function(){
  dropBox.style.display = 'block';
 }
  box.onmousedown = function(event){
  var evt = event || window.event;
  var mouseLeft = evt.clientX - dropBox.offsetLeft;
  var mouseTop = evt.clientY - dropBox.offsetTop;
  document.onmousemove = function(event){
  var evt = event || window.event;
  var x = evt.clientX - mouseLeft;
  var y = evt.clientY - mouseTop;
  dropBox.style.left = x + 155 + 'px';
  dropBox.style.top = y + 155 + 'px';
  }
  document.onmouseup = function (){
 document.onmousemove = null;
  }
  }

 }



 </script>
</head>
<body>
 <div class="nav">
 <a href="javascript:void(0);" id="register">點擊注冊</a>
 </div>
 <div class="dropBox" id="dropDiv">
 <div class="box" id="box">
 <span class="move">注冊信息（可以拖拽）</span>
 <span class="close" id="box2">【關(guān)閉】</span>
 </div>
 
 </div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: