WEB前端开发学习----11. JQuery 实现简单的拖拽效果

浏览数：31 / 时间：2015年06月09日

拖拽效果在网页中很常见。实现起来也不难。记录一下今天实现的简单效果。

拖拽演示

快速拖动时，会出现问题，以后修改.

说白了，就是3个点击事件。

1. 按下鼠标左键，触发点击事件，此时记录下可以得到鼠标相对于拖动控件的位置（当前鼠标位置-控件位置）；

2. 拖动鼠标，触发移动事件，可以计算出鼠标移动的距离（当前鼠标位置-之前算出的相对位置），也就是拖拽控件所移动的距离；

3. 鼠标抬起，结束拖动。

在JQ中，event.pageX event.pageY可以获取鼠标的位置，相对于文档左上角。

如图：

技术分享

注意，在jq获取控件的位置时：

x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));

要去掉单位px.

但是在修改控件位置时，不要加单位，也不要加引号，也不用加单位px！

dx=event.pageX-x;
dy=event.pageY-y;
//不要加引号！！！
$("#box").css({
"top":dy,"left":dx
})

完整代码：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>弹出层，移动</title>
<script src="jq11.js"></script>
<script>
//x,y为鼠标离控件左上角的相对位置
var x=0;
var y=0;
var flag=false;
$(document).ready(function(){
$("button").click(function(){
$("#box").show();
})
$("h3").mousedown(function(event){
//判断鼠标左键
if(event.which==1){
flag=true;
x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));
}
})
$("h3").mousemove(function(event){
if(flag){
//dx,dy鼠标移动的距离
var dx=0;
var dy=0;
dx=event.pageX-x;
dy=event.pageY-y;
//不要加引号！！！
$("#box").css({
"top":dy,"left":dx
})
}
})
$("h3").mouseup(function(event) {
flag=false;
});
$("span").click(function(){
$("#box").hide();
//关闭之后，应返回原来的位置
$("#box").css({
top:120,left:120
})
})
})
</script>
</head>
<style type="text/css">
*{margin:0px;
padding: 0px;}
body{
font-size: 14px;
padding: 100px;
}
#box{
width:500px;
height:400px;
border:3px ridge #ccc;
display: none;
box-shadow: 2px 2px 20px #888888;
position:absolute;
top:120px;
left:120px;
}
#box h3{
height:30px;
line-height: 30px;
background-color: #ABCDEF;
padding-left: 10px;
padding-right:10px;
color: white;
cursor: move;
}
#box span{
float: right;
font-size: 12px;
cursor: pointer;
color:red;
}
#box p{
height:350px;
padding: 10px;
box-shadow: 3px 3px 10px #aaa inset;
background: #FAFAFA;
}
</style>
<body>
<button>弹出</button>
<div id="box">
<h3><span>关闭</span>鼠标左键拖动</h3>
<hr/>
<p>有点小问题，不能快速的拖动，慢慢拖吧。。。以后有时间修改</p>
</div>
</body>
</html>