JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
					<div class="row" id="home-dash">
						<div class="col-lg-12">
							<!-- Dashboard content -->
							<div class="row sortable-heading">
								<div class="col-xs-2">
									<div class="panel bg-mid-grey">
										<div class="panel-heading panel-title cursor-move dash-panel-header"></div>

										<div class="panel-body">
											<h3 class="no-margin">17</h3>
											Item
											<div class="text-muted text-size-small">&nbsp;</div>
										</div>
									</div>
								</div>

								<div class="col-xs-2">
									<div class="panel bg-mid-grey">
										<div class="panel-heading panel-title cursor-move dash-panel-header"></div>
										
										<div class="panel-body">
											<h3 class="no-margin">2</h3>
											Item
											<div class="text-muted text-size-small">11.8%</div>
										</div>
									</div>
								</div>

								<div class="col-xs-2">

									<div class="panel bg-mid-grey">
										<div class="panel-heading panel-title cursor-move dash-panel-header"></div>
										<div class="panel-body">
											<h3 class="no-margin">0</h3>
											Item
											<div class="text-muted text-size-small">&nbsp;</div>
										</div>
									</div>

								</div>									

								<div class="col-xs-2">
									<div class="panel bg-mid-grey">
										<div class="panel-heading panel-title cursor-move dash-panel-header"></div>
										<div class="panel-body">
											<h3 class="no-margin">0.26%</h3>
											Item
											<div class="text-muted...

CSS

.bg-mid-grey {
  background:#cccccc;
  
}
.sortable-placeholder{
  background: black;
}
.panel-heading:after{
  content: "=";
  color: #000;
  }
.bg-red {
  background: red;
}

.bg-blue {
  background:#0000ff;
}

JavaScript

$(function() {
							
								$(".sortable-heading").sortable({
									items: '> .col-xs-2',
									helper: 'clone',
									cursor: 'move',
									handle: '.panel-title, [data-action=move]',
									revert: 100,
									containment: '#home-dash',
									opacity: 0.7,
									placeholder: 'sortable-placeholder',
									tolerance: 'pointer',
                  zIndex: 100,
									start: function(e, ui){
										 ui.placeholder.height(ui.item.outerHeight());
                     ui.placeholder.width(ui.item.outerWidth());
									}
								});								
							});