jquery鼠标拖动特效

来源：互联网发布：软件开发公司规章制度编辑：程序博客网时间：2024/04/29 13:47

初学jquery，写的有点垃圾。代码是花了5个小时想出来的,给大家参考参考。有什么问题尽管提。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
</head>

<body style="margin:0px">
<div id="layer" style="width:300px; height:200px; border:1px solid;">
<input id="btn" type="button" value="按钮" style="position:absolute; "/>
</div>
<p>X:<span id="x"></span>Y:<span id="y"></span></p>
</body>
<script type="text/javascript">
var bclick=false;//鼠标左键是否处于按住状态
var currenMouse= null;//当前鼠标对象
//鼠标按下事件
$("#btn").mousedown(function()
{
bclick=true;
currenMouse=this;
});
//鼠标按下结束事件
$(currenMouse).mouseup(function()
{
bclick=false;
});
//在层里面移动的事件
$("#layer").mousemove(function(event){
if(!bclick){
return;
}
$("#x").text(event.clientX);
$("#y").text(event.clientY);
$("#btn").css("left",event.clientX-10);
$("#btn").css("top",event.clientY-5);
});

</script>
</html>