jquery拖拽改變元素大小

時間 2019-11-11

原文原文鏈接

因使用到改變拖拽改變層大小的效果
摘了網上一段，而後本身寫的例子javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>層拖拽邊框改變大小</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
    var clickX, leftOffset, inx, nextW2, nextW;
    var dragging  = false;
    var doc       = document;
    var labBtn       = $("#wrap").find('#dvSplitter');
    var wrapWidth = $("#wrap").width();

    labBtn.bind('mousedown',function(){
            dragging   = true;
        }
    );

    doc.onmousemove = function(e){
        if (dragging) {
             clickX = e.pageY;             
             labBtn.css("top",clickX+"px");
             var wHegiht=$(window).height();
             labBtn.prev().height((wHegiht-clickX) + 'px');
        }
    };

    $(doc).mouseup(function(e) {
        dragging = false;
        e.cancelBubble = true;
    });
    
    $(".showDetailBtn").off("click").on("click",function(){
       $("#wrap").show();
    });
});
</script>
<style>
#wrap{
    width:100%;
    height:407px;
}
.detailInfoPanel{
    width:100%;
    height:400px;
    background:#f9f9f9;
    position:absolute;
    bottom:0px;
}
 
.frame-main-sptln-tb {
    cursor: row-resize;
    text-align: center;
    height: 3px;
    width:100%;
    border-width: 1px 0;
    position: absolute;
    bottom: 401px;
    right: 0;

}
.frame-main-sptln {
    background-color: #F6F6F6;
    border-style: solid;
    border-color: #D6D6D6;
    line-height: 0;
    font-size: 0;
    z-index: 24;
}
</style>
</head>
<body>             
<button class="showDetailBtn">顯示拖拽層</button>
<div id="wrap" style="display:none;">
    <div class="detailInfoPanel"></div>
    <div id="dvSplitter" class="frame-main-sptln frame-main-sptln-tb" style=""></div>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。