jquery拖拽改变元素大小

2024年2月21日 124次阅读 来源: ifyouknow

因使用到改变拖拽改变层大小的效果
摘了网上一段，然后自己写的例子

<!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>
    原文作者：ifyouknow
    原文地址: https://segmentfault.com/a/1190000008964443
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞