爱吾下载 ● 文章资讯

分类分类

jQuery拖拽div实现

更新时间：2026-03-11 16:29:37作者：csdn

思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是

1、组件左上角与屏幕左上角的相对位置

2、鼠标所在坐标与组件左上角的相对位置。

具体函数如下： 

 
  1. .drag{  
  2.        position:absolute;         
  3.        background:#0000CC;        
  4.        top:100px;left:200px;  
  5.        padding:0;  
  6.        }  


 

 
  1. $(document).ready(function(){    
  2. var move=false;//移动标记    
  3. var _x,_y;//鼠标离控件左上角的相对位置    
  4.     $(".drag").mousedown(function(e){    
  5.         move=true;    
  6.         _x=e.pageX-parseInt($(".drag").css("left"));    
  7.         _y=e.pageY-parseInt($(".drag").css("top"));         
  8.     });    
  9.     $(document).mousemove(function(e){    
  10.         if(move){    
  11.             var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置  
  12.             var y=e.pageY-_y;    
  13.             $(".drag").css({"top":y,"left":x});   
  14.         }    
  15.     }).mouseup(function(){    
  16.     move=false;        
  17.   });

其中e.pageX,e.pageY为当前鼠标的横纵坐标。

大家自己动手试一下，思路就更加清晰了~

 

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消