2列布局, 拖动改变宽度

最终效果

代码:

html:

        

            

                

                        
项目组织架构模版
                    
                



            
            

            
            

                

                        
公司组织架构
                    
                

            
        
    

js

$(document).ready(function() {
    //拖拽改变列宽
    layoutSep('layoutSep');
});
//需要配合resize使用....否则拖拽了后, 会把百分比宽度改成000px宽度.如果用户改变窗口大小...会把布局挤破...
$(window).resize(function() {
    var ns = $('.ui .ten');
    var ps = $('.ui .six');
    if($($("section")[0]).width() < 550) {
        ns.css('width', '60.5%');
        ps.css('width', '32.5%');
    } else {

        ns.css('width', '62.5%');
        ps.css('width', '34.5%');
    }
});

function layoutSep(id) {
    var x = 0;
    var s = $("#" + id);
    var ns = s.next();
    var ps = s.prev();
    s.mousedown(function(ev) {
        s.data('is_dragging', true);
        x = ev.pageX;
        document.onmousemove = function(e) {
            if(s.data('is_dragging')) {
                var movex = e.pageX - x;
                x = e.pageX;
                ps.width(ps.width() + movex);
                ns.width(ns.width() - movex);
                return false;
            }
        }
        document.onmouseup = function() {
            s.data('is_dragging', false);
            document.onmouseup = document.onmousemove = null;
        }
        return false;
    })

}