jQuery拖拽div实现思路

165 阅读 0 评论 109 点赞

我是靠谱客的博主笨笨白云，最近开发中收集的这篇文章主要介绍jQuery拖拽div实现思路，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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