最终效果

代码:

html:

<body>
        <section id="layoutcontent" class="ui grid">
            <div class="ui ten wide column">
                <div class="ui-header">
                        <h3 class="modal-title">项目组织架构模版</h3>
                    </div>
                <br /><br /><br />
            </div>
            <div id="layoutSep" class="ui layout_sep">
            </div>
            <div class="ui six wide column">
                <div class="ui-header">
                        <h3 data-bind="text:titleMsg" class="modal-title">公司组织架构</h3>
                    </div>
                <div class="ui list"></div>
            </div>
        </section>
    </body>

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;
    })

}