Question

我在网页上发现了https://doc.nuxeo.com/display/MAIN/Nuxeo+Documentation+Center+Home的调整大小框事件。

我根据代码设计编码了他们在上面的代码编码的内容。然而，即使我遵循了所有的代码，它似乎也在后面运行。

AIM ：我想对我的代码也有同样的效果。看到图片，左右拖动按钮时左侧深蓝色面板将可调整大小。这就是我所期待的......

#splitter {
    min-height: 300px;
    min-width: 600px;
}
.vsplitbar {
    background: #ccc url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/vgrabber.gif") no-repeat scroll center center;
    display: block;
    width: 5px;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
div#splitter-sidebar {
    background: #fff none repeat scroll 0 0;
}
#splitter-sidebar {
    background-image: url("/s/en_GB-1988229788/4394/a32f094df7825f58c6a417309475c6c954804a27.101/5.2.3/_/download/resources/com.atlassian.confluence.plugins.doctheme:css-resources/sidebar-shadow.png");
    background-position: right top;
    background-repeat: repeat-y;
    display: block;
}
#splitter #splitter-content, #splitter #splitter-sidebar {
    overflow: auto;
}
#splitter #splitter-content {
    background-color: #010101;
}
a, a:link, a:visited {
    transition: color 0.1s ease 0s;
}

<div class="topNavnar">
    <div id="fw-logo" class="company-logo">
        <div></div>
    </div>
    <div id="IconNav" class="iconsNav">
        <ul class="Icon_Nav nav nav-pills">
            <li><span class="glyphicon glyphicon-calendar"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-picture"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-stop"></span><span class="caret"></span>

                </a>
                <ul class="dropdown-menu">
                    <li>list1</li>
                    <li>list2</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="IconCreate" class="iconsCreate">
        <ul class="Icon_Nav_create nav nav-pills">
            <li><span class="glyphicon glyphicon-stop"></span>
            </li>
            <li><span class="glyphicon glyphicon-search"></span>
            </li>
            <li class="hasButton">
                <button type="button" class="btn btn-default">CREATE +</button>
            </li>
            <li><span class="glyphicon glyphicon-cog"></span>
            </li>
        </ul>
    </div>
</div>
<!-- vertical Navbar -->
<div id="splitter" style="position: relative; border: 2px solid red; height: 482px;">
    <div id="splitter-sidebar" style="position: absolute; left: 0px; height: 482px; width: 435px;">
        <div class="VertopNavnar">
            <div class="List_head">ITEMS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> Recent Assets</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
                <li><span class="glyphicon glyphicon-stop"></span> Something</li>
            </ul>
            <div class="List_head">TAGS</div>
            <div class="List_head"><span class="Folder_count">16</span> FOLDERS</div>
            <ul class="Ver_Icon_Nav_create">
                <li><span class="glyphicon glyphicon-stop"></span> something</li>
                <li><span class="glyphicon glyphicon-search"></span> 2015
                    <ul class="Ver_Nav_Sublist">
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> something</li>
                        <li><span class="glyphicon glyphicon-stop"></span> items</li>
                    </ul>
                </li>
                <li><span class="glyphicon glyphicon-cog"></span> Brand items</li>
                <li><span class="glyphicon glyphicon-cog"></span> something</li>
            </ul>
        </div>
    </div>
    <div class="vsplitbar" style="z-index: 4; position: absolute; -moz-user-select: none; cursor: ew-resize; left: 357px; height: 482px; background-color: red;" unselectable="on"><a href="javascript:void(0)" accesskey="L" tabindex="0" title="vsplitbar"></a>
    </div>
    <div id="splitter-content" style="position: absolute; left: 440px; width: 1160px; height: 482px;">
        <div ng-view></div>
    </div>
</div>

但是，在框[左侧面板]的左侧，调整大小按钮出现，但是，调整大小时没有重新调整大小，任何帮助我怎么能实现这个？

Answer 1

以下可以是您的答案。

<div class="panel" id="ui-Resizable" onselectstart="return false;" >
    <div class="title" >Resizable Panel</div>

</div>
<style>
  body{margin:0px;padding:50px;font-size:14px;color:#333}

    .panel{width:400px;height:240px;border:1px solid #ccc;position:relative;min-width:40px;min-height:24px;}
    .panel .title{background:#eee;text-align:center;line-height:30px;border:1px solid #fff;font-weight:bold}

    .ui-Resizable-r{position:absolute;right:0px;top:0px;width:10px;height:100%;cursor: e-resize;}
    .ui-Resizable-b{position:absolute;right:0px;bottom:0px;width:100%;height:10px;cursor: s-resize;}
    .ui-Resizable-rb{position:absolute;right:0px;bottom:0px;width:20px;height:20px;cursor: nw-resize;}

</style>

<script>
    var m_panel , m_ctrl , m_type ;

    var moving = 0 ,m_start_x = 0 , m_start_y = 0 , m_to_x = 0 , m_to_y = 0  ;

        var m_min_w = 100,m_min_h = 40;

        function on_mousedown( e , panel ,ctrl , type ){
        var e = e || window.event;

                m_start_x =  e.pageX - ctrl.offsetLeft;
        m_start_y =  e.pageY - ctrl.offsetTop;

        m_panel = panel;
        m_ctrl  = ctrl;
        m_type  = type;

        moving = setInterval(on_move,10);

    }
    document.onmousemove = function( e ){
        var e = window.event || e;
        m_to_x = e.pageX;
        m_to_y = e.pageY;
    }
    function on_move(){

        if(moving){

            var min_left = m_panel.offsetLeft
            var min_top  = m_panel.offsetTop 

            var to_x = Math.max(min_left+ m_min_w,m_to_x - m_start_x) ;
            var to_y = Math.max(min_top + m_min_h,m_to_y - m_start_y) ;

                            var grid = 50;

            var grid_w = to_x + ( m_type == 'rb' ? 20:10 ) ;
                grid_w = grid_w-grid_w%grid;

            var grid_h = to_y + ( m_type == 'rb' ? 20:10 ) ;
                grid_h = grid_h-grid_w%grid;


            switch(  m_type ){
                case 'r' :
                    m_ctrl.style.left =  to_x + "px";
                    m_panel.style.width=grid_w+'px';
                break;
                case 'b' :
                    m_ctrl.style.top  = to_y+ "px";
                    m_panel.style.height=grid_h+'px';
                break;
                case 'rb' :
                    m_ctrl.style.left =to_x + "px";
                    m_ctrl.style.top  =to_y+ "px";

                    m_panel.style.width=grid_w+'px';
                    m_panel.style.height=grid_h+'px';
                break;
            }
        }

    }

        document.onkeyup = document.onmouseup = function(e){
        clearInterval(moving);
        var cls = document.getElementsByClassName('ui-Resizable-ctrl');
        for(var i=0;i<cls.length;i++){
            cls[i].style.left = '';
            cls[i].style.top = '';
        }
    }

        function Resizable( panelId ){

        var panel = document.getElementById(panelId);
                var r = document.createElement("div");
        var b = document.createElement("div");
        var rb = document.createElement("div");

        r.class = r.className   = 'ui-Resizable-r  ui-Resizable-ctrl';
        b.class = b.className   = 'ui-Resizable-b  ui-Resizable-ctrl';
        rb.class = rb.className = 'ui-Resizable-rb ui-Resizable-ctrl';

        panel.appendChild(r);
        panel.appendChild(b);
        panel.appendChild(rb);

                r.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,r,'r');
        })
        b.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,b,'b');
        })
        rb.addEventListener('mousedown',function(e){
            on_mousedown(e,panel,rb,'rb');
        })
    }
    Resizable('ui-Resizable');
</script>

Answer 2

我的问题不明确。如果您想在点击调整大小按钮后调整框大小，请完成答案：

$(function(){

// Bind the resize event. When any test element's size changes, update its
// corresponding info div.

$('.test').resize(function(){

var elem = $(this);
// Update the info div width and height - replace this with your own code

// to do something useful!

elem.closest('.container').find('.info')

.text( this.tagName + ' width: ' + elem.width() + ', height: ' + elem.height() );
11.
});

// Update all info divs immediately.

$('.test').resize();
// Add text after inline "add text" links.

$('.add_text').click(function(e){

e.preventDefault();

$(this).parent().append( ' Adding some more text, to grow the parent container!' );

});
// Resize manually when the link is clicked, but only for the first paragraph.

$('.add_text:first').click(function(){

$(this).parent().resize();

});

});

Answer 3

有一个专门用于调整元素大小的jqueryUI函数： http://jqueryui.com/resizable/

修改

我偶然发现了一个问题，一个答案有一个我认为你正在寻找的演示。

执行此操作的三个事件函数是：

$('.handle').on('mousedown', function(e){ isDragging = true; sPos = e.pageX; handle = $(this); tWidth = handle.prev().width() + handle.next().width(); }); $(window).on('mouseup', function(e){ isDragging = false; }); $('.container').on('mousemove', function(e){ var cPos = sPos - e.pageX; if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){ handle.prev().width((tWidth - handle.next().width()) - cPos); handle.next().width(tWidth - handle.prev().width()); sPos = e.pageX; } });

以下是jsfiddle demo

以下是我所指的答案：https://stackoverflow.com/a/32658723/1071742

调整框大小时调整左侧div框的大小

3 个答案: