Twitter network splitter

Question

I have a boot grid with one row and two columns, now I want to set a separator between these columns. My code is as follows.

<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 a boot separator that separates the two columns. This example is similar to Silverlight. How can I create this separator? Do you have any knowledge? Thanks to everyone who read my post.

Answer 1

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

EDIT

You will try to use the following HTML code

 <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 a more comprehensive example for a div separator.