Jquery写个鼠标拖动的层

Jquery 鼠标拖动的层

本博客所有文章如果没有特殊说明 都属于原创

net 高级QQ群 86594082

下面是js代码 自己要引进JQ代码

<script type="text/javascript">
//记录鼠标是否按下
var isClick=false;
//按下鼠标时候的坐标
var defaultX;
var defaultY;
//移动的时候的坐标
var mouseX;
var mouseY;
//移动层距离上边和左边的距离
var DivTop;
var DivLeft;

$(function(){


$("#spClick").click(function(e){
alert("a");
//$(window).scrollTop(200);
});//spClick click end

//按下鼠标
$(".moveDiv").mousedown(function(e){
isClick=true;
defaultX=e.pageX;
defaultY=e.pageY;
DivTop=$(".moveTxt").css("top");
DivLeft=$(".moveTxt").css("left");
DivTop=parseFloat(String(DivTop).substring(0,String(DivTop).indexOf("px")));
DivLeft=parseFloat(String(DivLeft).substring(0,String(DivLeft).indexOf("px")));
$("#spShowPageXY").html("距离上面和左边的初始化距离是"+DivTop+":"+DivLeft);
}); //moveDiv click fun
//移动鼠标
$(".moveDiv").mousemove(function(e){
// alert("mover");
mouseX=e.pageX;
mouseY=e.pageY;
$("#spShowPageXY").html("距离上面和左边的初始化距离是"+DivTop+":"+DivLeft+"---鼠标移动时候的坐标X"+mouseX+":Y"+mouseY);
if(isClick &&mouseX>0 &&mouseY>0)
{
$("#spShowPageXY").html("距离上面和左边的初始化距离是"+DivTop+":"+DivLeft+"---开始移动");
var newTop=parseFloat(mouseY-defaultY);
var newLeft=parseFloat(mouseX-defaultX);
$(".moveTxt").css({"top":newTop+DivTop});
$(".moveTxt").css({"left":newLeft+DivLeft});
} //if end
});//mousemove fun end
//松开鼠标
$(".moveDiv").mouseup(function(e){
isClick=false;
$("#spShowPageXY").html("距离上面和左边的初始化距离是"+DivTop+":"+DivLeft+"---停止移动");
}); //moveDiv click fun
})//$end
</script>
下面是html代码

<style type="text/css">
div
{
margin
:0;
padding
:0;}
.moveDiv
{
width
:360px;
height
:30px;
line-height
:30px;
background
:#39C;
margin-top
:-30px;
cursor
:move;
}
.moveTxt
{
position
:absolute;
width
:360px;
height
:190px;
top
:40px;
left
:8px;
border
:#0C6 1px solid;
padding-top
:30px}

</style>
</head>

<body>
<div id="divA">
<span id="spClick" title="span1" ></span>
<span id="spShowPageXY" title="span1" style="height:30px; border:#906 solid 1px; position:relative" ></span>
<div class="moveTxt">
<div class="moveDiv">可以拖动我哦!</div>
<span id="sptxt"></span>
</div>

</div>

</body>
</html>



posted @ 2012-01-29 11:11  伤心木乃伊  阅读(1780)  评论(1编辑  收藏  举报