jQuery实战教程如何拖拽改变元素大小-职坐标

jQuery实战教程如何拖拽改变元素大小

沉沙 2018-06-28 来源：阅读 1398 评论 0

摘要：本篇jQuery实战教程通过代码讲解了如何拖拽改变元素大小，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>层拖拽边框改变大小</title>
<script type="text/javascript" src="//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>显示拖拽层</button>
<div id="wrap" style="display:none;">
    <div></div>
    <div id="dvSplitter" class="frame-main-sptln frame-main-sptln-tb" style=""></div>
</div>
</body>
</html>

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端jQuery频道！

jquery教程百度云 jquery实战第三版 jquery实战教程百度云

本文由 @沉沙发布于职坐标。未经许可，禁止转载。