jQuery拖動div，移動div，彈出層

時間 2021-01-30

標籤 javascript css html java jquery web ide spa orm 欄目 JQuery 简体版

原文原文鏈接

以前一直想本身來寫個拖動div的js代碼，一直沒動手，昨晚寫了一下，而後百度了一下相關的文章，發現貌似不太詳細？？javascript

代碼演示： css

http://www.imqing.com/demo/movediv.htmlhtml

大概原理： java

使div的position爲絕對定位absolute，而後控制其top與left值，須要監聽鼠標事件，主要用到mousedown, mousemove, mouseup。jquery

在mousedown後，記錄mousedown時鼠標與須要移動的div的位置，而後取得二者之差，獲得在鼠標移動後，div的位置。即：web

  
  
           
  
  
   
   
            
   
   left = 當前鼠標位置.x - (鼠標點擊時的.x值 - div的初始位置x值)  
   
   
            
   
   top = 當前鼠標位置.y - (鼠標點擊時的.y值 - div的初始位置y值)

代碼：ide

  
  
           
  
  
   
   
            
   
   <!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>