鼠标拖动小窗口

最新推荐文章于 2025-09-08 17:59:21 发布

转载最新推荐文章于 2025-09-08 17:59:21 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zt-p/p/7117032.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML、CSS及jQuery实现的简单拖拽窗口功能。通过鼠标事件完成窗口的拖动，适合初学者理解拖拽操作的基本原理。

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

<!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>