News新闻

业界新闻动态、技术前沿
Who are we?

您的位置：首页      网站知识      jQuery拖拽div实现

jQuery拖拽div实现

发布日期：2014-02-19 00:00:00 2253

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

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

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

具体函数如下：

 

css" style="font-family: Consolas, 'Courier New', Courier, mono, serif; background-color: rgb(231, 229, 220); width: 936.53125px; overflow: auto; padding-top: 1px; color: rgb(0, 0, 0); line-height: 26px; margin: 18px 0px !important;">
[css] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. .drag{  
  2.        position:absolute;         
  3.        background:#0000CC;        
  4.        top:100px;left:200px;  
  5.        padding:0;  
  6.        }  


 

 

 

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  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为当前鼠标的横纵坐标。

 

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

相关文章