拖拽改变上下元素之间的大小 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        .modal-body .uploadFileList {height:100%;overflow:auto;border:1px solid #ccc;paddign:5px;}
        .modal-body .uploadFileShow {border:1px solid #ccc;border-left:none;padding:0;position:relative;height:100%;padding-top:55px;}
        .modal-body .uploadFileShow .uploadFileShowTop {padding:10px;border-bottom:1px solid #ccc;position:absolute;top:0;width:100%;}
        .uploadFileShow .uploadFileShowTop .btn.btn-primary {margin-right:8px;}
        .uploadFileShow  .changeShowHeight {cursor: n-resize;height:18px;border:8px solid #fff;border-left:none;border-right:none;width:100%;background-color:#ccc;position:absolute;top:300px;}
        .uploadFileShow .uploadFileShowPage {position:relative;height:100%;}
        .uploadFileShow .uploadFileShowPage .uploadFileShowMid, .uploadFileShow .uploadFileShowPage .uploadFileShowBot {height:300px;overflow:auto;box-sizing: border-box;}
        .uploadFileShow .uploadFileShowPage .uploadFileShowBot {margin-top:18px;}
    </style>
</head>
<body>
<div id="example" class="modal fade in" style="display:block">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3 style="margin:0">xxxx</h3>
        </div>
        <div class="modal-body" style="height:704px;">
            <div class="uploadFileList col-md-3"></div>
            <div class="uploadFileShow col-md-9">
                <div class="uploadFileShowPage">
                    <div class="uploadFileShowMid"></div>
                    <div class="changeShowHeight" id="changeShowHeight"></div>
                    <div class="uploadFileShowBot"></div>
                </div>
                <div class="uploadFileShowTop">
                    <button class="btn btn-primary">导入</button>
                    <button class="btn btn-primary">确定</button>
                    <button class="btn btn-primary">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var clickY,dragging,topLimit=$('.uploadFileShowPage:eq(0)').offset().top+200,bottomLimit=$('.uploadFileShowPage:eq(0)').offset().top+$('.uploadFileShowPage:eq(0)').height()-201-18,doc=document,changeShowHeight=$('#changeShowHeight');
        changeShowHeight.on('mousedown',function(e){
            dragging=true;
        });
        $(doc).mousemove(function(e){
            e = e || window.event;
            clickY=e.pageY;
            if(dragging){
                if(clickY<topLimit){
                    changeShowHeight.css('top','201px');
                    dragging= false;
                }else if(clickY>bottomLimit){
                    changeShowHeight.css('top',bottomLimit-$('.uploadFileShowPage:eq(0)').offset().top+6+'px');
                }else {
                    changeShowHeight.css('top',clickY-$('.uploadFileShowPage:eq(0)').offset().top+'px');
                }
                changeShowHeight.prev().height(parseFloat(changeShowHeight.css('top'))).next().next().height($('.uploadFileShow:eq(0)').height()-parseFloat(changeShowHeight.css('top'))-18)
            }
        }).mouseup(function(e){
            dragging=false;
            e=e||window.event;
            e.preventDefault?e.preventDefault():e.cancalBubble=true;
        })
    </script>
</body>
</html>

 

posted @ 2017-10-26 16:57  家猪难养  阅读(220)  评论(0)    收藏  举报