jQuery拖拽div实现思路_jquery_--HTML5中文学习网

jQuery拖拽div实现思路_jquery_

2014-02-20 09:19:11 [小大] 已经帮助：人解决问题

思路是利用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为当前鼠标的横纵坐标。

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

（责任编辑：）