鼠标拖动小窗口

原本想做一个拖拽伸拉侧边导航的，奈何技术不够，先来制作一个拖拽小窗口吧！一步一步来吧，小菜鸟……

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .box{
    width:200px;
    height:200px;
    background-color:#FFD8B4;
    float: left;
   }
   .LR{
    cursor: all-scroll;
   }
  </style>
 </head>
 <body>
  <div class="box" id="box"></div>
 </body>
 <script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  $(function(){
   var curX,curY,x,y;
   var state=false;
   $("#box").hover(function(){
    $(this).addClass('LR');
   },function(){
    $(this).removeClass('LR');
   })
   $('#box')[0].onmousedown=function(){
    x=event.offsetX;
    y=event.offsetY;
    state=true;
   }
   $('#box')[0].onmousemove=function(){
    curX=event.clientX;
    curY=event.clientY;
    if(state==true){
     $(this).offset({left:curX-x,top:curY-y});
    };
   }
   $('#box')[0].onmouseup=function(){
    state=false;
   }
  });
 </script>
</html>

一个简单的鼠标事件，貌似还有不少bug，但是看上去还凑合，欢迎大牛们提出意见改进

posted @ 2017-07-04 15:53  zt_p  阅读(252)  评论(0)    收藏  举报