jQuery拖拽div实现

Mike

思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是
1、组件左上角与屏幕左上角的相对位置
2、鼠标所在坐标与组件左上角的相对位置。
具体函数如下：

.drag{
    position:absolute;     
    background:#0000CC;    
    top:100px;left:200px;
    padding:0;
    }

$(document).ready(function(){  
var move=false;//移动标记  
var _x,_y;//鼠标离控件左上角的相对位置  
  $(".drag").mousedown(function(e){  
    move=true;  
    _x=e.pageX-parseInt($(".drag").css("left"));  
    _y=e.pageY-parseInt($(".drag").css("top"));     
  });  
  $(document).mousemove(function(e){  
    if(move){  
      var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置
      var y=e.pageY-_y;  
      $(".drag").css({"top":y,"left":x}); 
    }  
  }).mouseup(function(){  
  move=false;    
  });

其中e.pageX,e.pageY为当前鼠标的横纵坐标。大家自己动手试一下，思路就更加清晰了~