jquery窗口拖动

最新推荐文章于 2023-03-20 23:06:22 发布

原创最新推荐文章于 2023-03-20 23:06:22 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #jquery特效 #拖动窗口

转载专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的拖动窗口功能，包括窗口的透明显示、移动以及边界限制。通过mousedown、mousemove和mouseup事件，用户可以轻松地拖动窗口，并在拖动过程中实时更新窗口的位置，同时设置了窗口的左右边界防止超出屏幕范围。

$(function(){

   // Start 窗口的拖动
         var _move=false;                 //移动标记
         var _x,_y;
        var $width=$('#outer').width();
        var $height=$('#outer').height();
        var $screen=$(document).width();
        $(".title").mousedown(function(e){    //鼠标离控件左上角的相对位置
              _move=true;
            _x=e.pageX-parseInt($("#outer").css("left"));
            _y=e.pageY-parseInt($("#outer").css("top"));
            $("#outer").fadeTo(20, 0.5); //点击后开始拖动并透明显示
          });

          $(document).mousemove(function(e){
                  if(_move){
                            var x=e.pageX-_x;                   //移动时根据鼠标位置计算控件左上角的绝对位置
                            var y=e.pageY-_y;
                            var $side=$width+x+20;
                           if($screen<=$side||x<=0)
                                     _move=false;                          //控制左右边界
                            else
                                    $("#outer").css({top:y,left:x});      //控件新位置
                   }
           }).mouseup(function(){
                    _move=false;

                    $("#outer").fadeTo("fast", 1);                           //松开鼠标后停止移动并恢复成不透明
           });

// End 窗口的拖动

});
*******************

</div>