jquery窗口拖动

$(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 id="outer">

       <div class="title">标题</div>

</div>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值