Splitter celle per Twitter Bootstrap Grid System

Question

Ho una griglia di bootstrap con una riga e due colonne, ora voglio impostare lo splitter tra quelle colonne. Il mio codice è simile a questo.

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

Ora voglio creare una direttiva angolare o uno splitter di bootstrap che dividerà queste due colonne. Questo esempio è simile a Silverlight. Come posso creare lo splitter? Hai qualche conoscenza? Grazie a tutti quelli che hanno letto la mia scrittura.

Answer 1

È possibile creare manualmente lo splitter . Vedi questo Jsfiddle o Plnlkr.

EDIT

Si cercherà da questa seguente codice 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; 
     } 
    }); 
}); 

Questo è il più completo example per div splitter.