JSFiddle - React, Tailwind, and code Playground
HTML
<div class="v-main-container">
<div class="v-section">
<div class="v-section-toolbar v-clearfix">
<div class="v-left">
<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
</div>
<div class="v-right">
<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
</div>
</div>
<div class="v-content-container v-row-fluid">
<div class="v-span6">
</div>
<div class="v-span6">
</div>
</div>
</div>
<div class="v-section">
<div class="v-section-toolbar v-clearfix">
<div class="v-left">
<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
</div>
<div class="v-right">
<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
</div>
</div>
<div class="v-content-container v-row-fluid">
<div class="v-span6">
</div>
<div class="v-span6">
</div>
</div>
</div>
<div class="v-section">
<div class="v-section-toolbar v-clearfix">
<div class="v-left">
<a href="#" class="v-btn v-btn-mini v-c-move v-section-dragger" title="Move section"><span class="v-glyphicons-empty glyphicons move"><i></i></span></a>
</div>
<div class="v-right">
<a href="#" class="v-btn v-btn-mini" title="Remove section"><span class="v-glyphicons-empty glyphicons remove_2"><i></i></span></a>
</div>
</div>
<div class="v-content-container v-row-fluid">
<div class="v-span6">
</div>
<div class="v-span6">
</div>
</div>
</div>
</div>
CSS
.v-left {
float: left;
}
.v-right {
float: right;
}
.v-clearfix {
*zoom: 1;
}
.v-wrap .v-btn.v-c-move {
cursor: move;
}
.v-clearfix:before,
.v-clearfix:after {
display: table;
line-height: 0;
content: "";
}
.v-clearfix:after {
clear: both;
}
.v-controls {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
margin: 10px 0;
}
.v-wrap .v-btn {
display: inline-block;
*display: inline;
padding: 4px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.v-wrap .v-btn:visited {
color: #333333;
}
.v-wrap .v-btn:hover,
.v-wrap .v-btn:focus,
.v-wrap .v-btn:active,
.v-wrap .v-btn.active,
.v-wrap...
JavaScript
jQuery( document ).ready( function() {
$( '.v-content-container' ).sortable({
placeholder : 'v-column-placeholder',
start : function( e, ui ){
ui.placeholder.width( ui.item.width() );
ui.placeholder.height( ui.item.height() );
}
});
});