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

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

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為青田企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計，青田網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

實現(xiàn)效果：

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

實現(xiàn)步驟：

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

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

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

4.給上方藍(lán)色盒子設(shè)置onmousedown(鼠標(biāo)點(diǎn)擊事件)，同時獲取鼠標(biāo)點(diǎn)擊位置
離拖拽盒子的距離，為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">點(diǎn)擊注冊</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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁題目：JavaScript實現(xiàn)拖拽盒子效果
當(dāng)前地址：http://chinadenli.net/article34/jiepse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、品牌網(wǎng)站設(shè)計、營銷型網(wǎng)站建設(shè)、App開發(fā)、App設(shè)計、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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