用于Twitter Bootstrap网格系统的Cell Splitter

Question

我有一个包含一行和两列的引导网格，现在我希望在这些列之间设置分割器。 我的代码看起来像这样。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <!--need to work here-->
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

现在我想创建一个角度指令或bootstrap拆分器，它将拆分这两列。此示例与Silverlight类似。我该如何创建分割器？你有什么知识吗？谢谢所有读过我写作的人。

Answer 1

您可以手动创建拆分器。请参阅此Jsfiddle或Plnlkr。

修改

您将尝试以下代码 的 HTML

<div id="sidebar">
   <span id="position"></span>
   <div id="dragbar"></div>
   sidebar
</div>
<div id="main">
   main
</div>

<强> CSS

body,html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#main {
    background-color: BurlyWood;
    float: right;
    position: absolute;
    height: 200px;
    right: 0;
    left: 200px;
    margin-top: 10px;
}

#sidebar {
    background-color: IndianRed;
    margin-top: 10px;
    width: 200px;
    float: left;
    position: absolute;
    height: 200px;
    overflow-y: hidden;
}

#dragbar {
    background-color: black;
    height: 100%;
    float: right;
    width: 3px;
    cursor: col-resize;
}

#ghostbar {
    width: 3px;
    background-color: #000;
    opacity: 0.5;
    position: absolute;
    cursor: col-resize;
    z-index: 999;
}

<强> JS

$(document).ready(function () {
    var i = 0;
    var dragging = false;
    $('#dragbar').mousedown(function (e) {
        e.preventDefault();
        dragging = true;
        var main = $('#main');
        var ghostbar = $('<div>', {
            id: 'ghostbar',
            css: {
                height: main.outerHeight(),
                top: main.offset().top,
                left: main.offset().left
            }
        }).appendTo('body');
        $(document).mousemove(function (e) {
            ghostbar.css("left", e.pageX + 2);
        });
    });
    $(document).mouseup(function (e) {
        if (dragging) {
            $('#sidebar').css("width", e.pageX + 2);
            $('#main').css("left", e.pageX + 2);
            $('#ghostbar').remove();
            $(document).unbind('mousemove');
            dragging = false;
        }
    });
});

这是div分割器的更全面的example。