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>