关于jQuery拖拽问题。

如何给div限定移动边界呢,设置了_move=false但是当往回拖div的时候拖不动,谢谢。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    <html>  
    <head>
    <meta charset="utf-8">  
      <title> New Document </title>  
      <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>  
      <style type="text/css">  
    /*模块拖拽*/  
    .drag{position:absolute;
          width:100px;
          height:100px;
          border:1px solid #ddd;
          background:#FBF2BD;
          text-align:center;
          line-height:100px;
          padding:5px;
          top:100px;
          left:390px;
          cursor:move;
        }

    .box{ width:900px;
          height:500px;
          background:#AAA;
          position:absolute;
          top:36px;
          left:50px;
        }  


    </style>  

    <script type="text/javascript">  
    // 模块拖拽  
    $(function(){  
    var _move=false;//移动标记  
    var _x,_y;//鼠标离控件左上角的相对位置
    $(".drag").each(function(index) {
       $(this).text("机柜"+(index+1))//机柜编号
       $(this).mousedown(function(e){  
            _move=true;  
            _x=e.pageX-parseInt($(this).css("left"));  
            _y=e.pageY-parseInt($(this).css("top"));  
            $(this).fadeTo(20, 0.5);
            //点击后开始拖动并透明显示  
            }).mousemove(function(e){  
              if(_move){  
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置  
                var y=e.pageY-_y;
                var left=$(this).position().left;
                var top=$(this).position().top;
                var _left=$(".box").position().left;
                var _top=$(".box").position().top;
                $(this).css({top:y,left:x});//新位置

                 if(left<=_left){
                    _move=false//限定边界

                     }
                }

            }).mouseup(function(){  
             _move=false;  
            $(this).fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明  
          });    
     })                        

     });       

    </script>  
    </head>  
    <body>
    <div class="box">

     <div class="drag"></div>
      <div class="drag"></div>
      <div class="drag"></div>  
      <div class="drag"></div>  
      <div class="drag"></div>  
      <div class="drag"></div>

    </div>             
    </body>  
    </html>         

1个回答

showbo
支付宝加好友偷能量挖 mousemove应该改为判断不再范围内才执行 $(this).css({ top: y, left: x });操作
接近 3 年之前 回复
showbo
支付宝加好友偷能量挖 看错。。你移动出边界了,在移动的时候只能1px 1px移动回可移动范围内才能连续移动,因为一触发mousemove就马上设置为true了,只能放开鼠标设置未false
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问