jQuery拖拽div实现思路

2019-11-20 21:04:53

字体：大中小

来源：转载

供稿：网友

思路是利用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; 
}); 