angularjs - 用于 Twitter Bootstrap 网格系统的单元格拆分器

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>

现在我想创建一个 Angular 指令或引导拆分器来拆分这两列。此示例类似于 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;
        }
    });
});

这是更全面的 example用于 div 拆分器。