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>

其实代码量也很少的，嘿嘿。要点就是须要移动的div的position是绝对定位，而后检测鼠标事件就好了。嘿嘿。ui