JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<div class="container-fluid">
		<div class="row-fluid">
			<div class="span10 offset1" id="sortable">
				<div class="row-fluid widget-row ui-sortable">
					<div class="span4 widget" id="widget1" data-widgetsize="4" data-n-index="4">
	<div class="widget_header">
		Widget Size 4, id widget1	</div>
	<div class="widget_body">
		Widget Body (Size 4)
	</div>
</div>						<div class="span2 widget" id="widget2" data-widgetsize="2" data-n-index="6">
	<div class="widget_header">
		Widget Size 2, id widget2	</div>
	<div class="widget_body">
		Widget Body (Size 2)
	</div>
</div>						<div class="span6 widget" id="widget3" data-widgetsize="6" data-n-index="12">
	<div class="widget_header">
		Widget Size 6, id widget3	</div>
	<div class="widget_body">
		Widget Body (Size 6)
	</div>
</div>						<div class="span4 widget first-in-row" id="widget4" data-widgetsize="4" data-n-index="4">
	<div class="widget_header">
		Widget Size 4, id widget4	</div>
	<div class="widget_body">
		Widget Body (Size 4)
	</div>
</div>						<div class="span4 widget" id="widget5" data-widgetsize="4" data-n-index="8">
	<div class="widget_header">
		Widget Size 4, id widget5	</div>
	<div class="widget_body">
		Widget Body (Size 4)
	</div>
</div>																		<div class="span8 widget first-in-row" id="widget8" data-widgetsize="8" data-n-index="8">
	<div class="widget_header">
		Widget Size 8, id widget8	</div>
	<div class="widget_body">
		Widget Body (Size 8)
	</div>
</div>						<div class="span4 widget" id="widget9" data-widgetsize="4" data-n-index="12">
	<div class="widget_header">
		Widget Size 4, id widget9	</div>
	<div class="widget_body">
		Widget Body (Size 4)
	</div>
</div>					</div>
				<div...

CSS

body
{
	background-color: #EAEAEA;
	font-size: 0.8em;
	line-height: 1em;
}

a
{
    outline: none;
}

/* Dashboard Header */
.dashboard-header 
{
    background-color: #34495E;
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 600;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
}

/*Left Menu*/
div#dashboard-nav-menu
{
	background-color: #FFF;
	height: 100%;
    margin-left: -20px;
    margin-right: 20px;
}

div#dashboard-nav-menu ul li
{
    border-bottom: 1px solid #DDD;
}

div#dashboard-nav-menu ul li a
{
    border: none;
    padding-left: 15px;
    padding-right: 15px;
}

div#dashboard-nav-menu ul li a:hover,
div#dashboard-nav-menu ul li a.nav-active
{
    background-color: #eee;
    border-color: #DDD;
}

div#dashboard-nav-menu ul li.nav-header
{
    font-size: 1em;
    line-height: 1.1em;
    color: #000;
    font-weight: bold;
    padding-top: 8px;
    padding-bottom: 8px;
}

/*Widget*/
.widget
{
    margin-bottom: 15px;
    margin-top: 15px;
    cursor: move;
}

.widget_header
{
    width:96%;
    height:30px;
    background-color: #ededed;
    padding: 0 2%;
    color: #fff;
    line-height: 30px;
    vertical-align: middle;
    font-weight: bold;
}
.widget_body
{
    width:96%;
    padding:0 2%;
    background-color: #d3d3d3;
    height: 100px;
}


#sortable
{
}

.ui-state-highlight
{
    background-color: yellow;
    border: 1px solid #666;
}
.widget-row
{
    margin:20px 0;
    background-color:#FFF;
    min-height: 200px;
}
.first-in-row
{
    margin-left:0 !important;
}

JavaScript

$(function() {
		//arrange_doc();
		$(".widget-row").sortable({
			connectWith:".widget-row",
			helper:"clone",
			revert:true,
			placeholder: "ui-state-highlight",
			opacity:0.5,
			 grid: [ 20, 10 ] ,
			start: function(e, ui ){
				ui.placeholder.height(ui.helper.outerHeight());
				ui.placeholder.width(ui.helper.outerWidth());
				//console.log(ui.helper.attr('id'));
			},
			update: function(event, ui){
				//arrange_doc();
			}
		});
	});