JSFiddle - React, Tailwind, and code Playground

by martyk

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<div class="tabbable" > 
	<ul class="nav nav-tabs" id="my-tabs">  
		<li class="active"><a href="#tab1"> Tab1 </a></li>  
		<li class=""><a href="#tab2"> Tab2 </a></li>  
	</ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <table id='table-draggable1'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>col1</th>
                        <th>col2</th>  
                        <th>col3</th>  
                        <th>col4</th>  
                    </tr>
                    <tr>   
                        <td>156</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td>  
                        <td>1.82</td>                                                                  
                    </tr>  
                    <tr>  
                        <td>256</td>                                                                                         
                        <td>668</td>                                                              
                        <td>100.95</td> 
                        <td>1.82</td>                                                                
                    </tr>  
                </tbody> 
            </table>
        </div>
        <div class="tab-pane" id="tab2">
            <table id='table-draggable2'>  
                <tbody class="connectedSortable">  
                    <tr>
                        <th>COL1</th>  
                        <th>COL2</th>  
                        <th>COL3</th>  
                        <th>COL4</th>  
                   ...

CSS

ul li {
    min-width: 200px;
}
.dragging li.ui-state-hover {
    min-width: 240px;
}
.dragging .ui-state-hover a {
    color:green !important;
    font-weight: bold;
}
th,td {
    text-align: right;
    padding: 2px 4px;
    border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
    cursor: move;
}
.connectedSortable tr:first-child {
    cursor: default;
}
.ui-sortable-placeholder {
    background: yellow;
}

JavaScript

$(document).ready(function() {
    $tabs = $(".tabbable");

    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })
    
    $( "tbody.connectedSortable" )
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            helper:"clone",
            zIndex: 999990,
            start: function(){ $tabs.addClass("dragging") },
            stop: function(){ $tabs.removeClass("dragging") }
        })
        .disableSelection()
    ;
    
    var $tab_items = $( ".nav-tabs > li", $tabs ).droppable({
      accept: ".connectedSortable tr",
      hoverClass: "ui-state-hover",
      over: function( event, ui ) {
        var $item = $( this );
        $item.find("a").tab("show");
        
      },
      drop: function( event, ui ) {
        return false;
      }
    });
    
});