qq_31650597
qq_31650597
2017-03-23 01:47

关于jQuery拖拽问题。

  • jquery
  • javascript

如何给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条回答

为你推荐

换一换