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>
