萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery拖動div、移動div、彈出層實現原理及示例

jQuery拖動div、移動div、彈出層實現原理及示例

 正如標題所言的實現原理是使div的position為絕對定位absolute,然後控制其top與left值,需要的朋友可以參考下

代碼演示:    http://www.imqing.com/demo/movediv.html    大概原理:    使div的position為絕對定位absolute,然後控制其top與left值,需要監聽鼠標事件,主要用到mousedown, mousemove, mouseup。    在mousedown後,記錄mousedown時鼠標與需要移動的div的位置,然後取得兩者之差,得到在鼠標移動後,div的位置。即:    left = 當前鼠標位置.x - (鼠標點擊時的.x值 - div的初始位置x值)  top = 當前鼠標位置.y - (鼠標點擊時的.y值 - div的初始位置y值)    代碼:   代碼如下: <!DOCTYPE html>  <html lang="zh">  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <title>Qing's Web</title>  <script src="./jquery-1.7.2.min.js" type="text/javascript"></script>  <style type="text/css">  .footer {  position: fixed;  bottom: 0;  width: 100%;  }  .moveBar {  position: absolute;  width: 250px;  height: 300px;  background: #666;  border: solid 1px #000;  }  #banner {  background: #52CCCC;  cursor: move;  }  </style>  </head>  <body style="padding-top: 50px;">    <div class="moveBar">  <div id="banner">按住此處移動當前div</div>  <div class="content">這裡是其它內容</div>  </div>  <div class="footer">  <p align="center" class="label">ALL Rights Reserved Qing 版權所有</p>  </div>  <script>  jQuery(document).ready(  function () {  $('#banner').mousedown(  function (event) {  var isMove = true;  var abs_x = event.pageX - $('div.moveBar').offset().left;  var abs_y = event.pageY - $('div.moveBar').offset().top;  $(document).mousemove(function (event) {  if (isMove) {  var obj = $('div.moveBar');  obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});  }  }  ).mouseup(  function () {  isMove = false;  }  );  }  );  }  );  </script>  </body>  </html>    其實代碼量也不多的,嘿嘿。要點就是需要移動的div的position是絕對定位,然後檢測鼠標事件就行了。嘿嘿。 
copyright © 萬盛學電腦網 all rights reserved