jQuery拖拽div实现思路

发布时间：2020-12-14 22:33:14 所属栏目：资源来源：网络整理

导读：思路是利用jquery的mousemove，mousedown，mouseup三个事件，定义两个相对位置，分别是 1、组件左上角与屏幕左上角的相对位置 2、鼠标所在坐标与组件左上角的相对位置。具体函数如下：复制代码代码如下: .drag{ position:absolute; background:#0000CC; to

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!