Cell Splitter for Twitter Bootstrap Grid System

Question

I have a bootstrap grid with one row and two columns, now I want set splitter between those columns. My code looks like this.

<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>

Now I want to create an angular directive or bootstrap splitter that will split those two columns. This example is similar to Silverlight. How can i create that splitter? Do you have any knowledge? Thanks everybody who has read my write.

Answer 1

You can create splitter manually. See this Jsfiddle or Plnlkr.

EDIT

You will try by this following code 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;
        }
    });
});

This is the more comprehensive example for div splitter.