JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tiny-rhino.co.uk/css/bootstrap.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://tiny-rhino.co.uk/js/bootstrap.js"></script>
<!------------------------------------------------------------------------------------------------>
<!-------------------------------------------SO:SideBar------------------------------------------->
<!------------------------------------------------------------------------------------------------>


<div class=" GBSideBar " >

	<button id="GBSiderBarOpen">+</button>
	
	<div id="GBSideBarContainer" class="GBSideBarContainer">

		<div class="accordion" id="accordion2">
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a  class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
		        Collapsible Group Item #1
		      </a>
		    </div>
		    <div id="collapseOne" class="accordion-body collapse in sideBarDraggable ">
		     
		       

				<div class="GBDragBox"id="GBBox8">
			 		<img src="http://dev.gearbox.com/com/celtic/gearbox/gears/core/PageHeader.png" />
				</div>

				<div class="GBDragBox"id="GBBox8">
			 		<img src="http://dev.gearbox.com/com/celtic/gearbox/gears/core/PageHeader.png" />
				</div>	


		     
		    </div>
		  </div>
		  <div class="accordion-group">
		    <div class="accordion-heading">
		      <a class="accordion-toggle" data-toggle="collapse"   data-parent="#accordion2" href="#collapseTwo">
		        Collapsible Group Item #2
		      </a>
		    </div>
		    <div id="collapseTwo" class="accordion-body collapse sideBarDraggable ">
		      
		        

				<div class="GBDragBox"id="GBBox8">
			 		<img src="http://dev.gearbox.com/com/celtic/gearbox/gears/core/PageHeader.png" />
				</div>

				<div...

CSS

/*First we need to position the feedback box.*/
		.GBSideBar{
			position:absolute;
			left:0;
			top:40px;
			bottom:0;
		
		}
		
		/*We need to style the feedback button you will use to slideout the feedback form. This button will need to stand out on the page and be large enough to be noticed.*/
		.GBSideBar button {
			display:block;
			height:25px;
			width: 30px;
			text-align:center;
			background:red;
			border:2px solid #000;

			float:left;
			cursor:pointer;
			float:right;
			
			/*Font*/
			color:#FFF;
			font-weight:bold;
		}
		
		/*Now we have the button we can create the styling for the form.*/
		.GBSideBarContainer {
				float:left;
				height:100%;
				width:300px;
				border:1px solid #000;
				background:#222;
				display:none;
				
				
			}

.GearboxContentArea {
			float: left; 
			padding-bottom: 100px; 
		}

		.GBDragBox {  

			margin: 30px 20px 0 20px;
			padding: 2px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px; 
			background:#dd0000;
			background-color: #8dc100;
		}
		
		.GBDragBoxDisabled {  

			margin: 30px 20px 0 20px;
			padding: 2px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px; 
			background:#dd0000;
		}
		
		.GBDragBoxHead {

			color: #000;
			overflow: hidden;
			width: 100%;
			height: 30px;
			line-height: 30px;
			cursor: move;
			display : none;
		}

		.GBDragBoxHead h3 {

			padding: 0 5px;
			float: left;
			color: #FFF;
			font-size: 18px;
		}

		.GBDragBoxContent {
			background: #fff;
			padding: 0 5px;
			color: #000;
			-moz-border-radius-bottomleft: 2px;
			-moz-border-radius-bottomright: 2px;
			line-height: 1.2em;
			overflow: hidden;
		}

		.widget-placeholder {
			border: 2px dashed #999;
		}

		.ui-sortable-placeholder { 
			background-color: #FFF; 
			border: 2px dashed #999; 
			visibility: visible !important; 
			max-height	: 150px;
		}

		.ui-sortable-placeholder * {
			visibility: hidden; 
		}

        .accordion-heading + div.accordion-body {
            position: static;
...

JavaScript

//toggle bar
$(document).ready(function() {
  $('#GBSiderBarOpen').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

function UpdateIndex(){

			var array = $( ".GearboxContentArea" ).sortable('toArray');
			console.log(array);

		}

		var originalCol = "";
		var targetCol = "";


		$(function() {
			
			
			//main content
	    	$( ".GearboxContentArea" ).sortable({
				items: "> .GBDragBox",
				delay: 150,
				handle: ".GBDragBoxHead",
				forcePlaceholderSize: true,
				tolerance: "pointer",
		      	update: function(event, ui) {
            		var start_pos = ui.item.data('start_pos');
           			var end_pos = ($(ui.item).index());
            		updateArray(targetCol);
            		originalCol = "";
					targetCol = "";
					
        		},
				start : function(event,ui){
					var GBMaxDragBoxHeight = parseInt($(".ui-sortable-placeholder").css("max-height").replace("px",""))
					var start_pos = ui.item.index();
            		ui.item.data('start_pos', start_pos);

					$('#' + ui.item.context.id).css({ "max-height": $('#' + ui.item.context.id + ' .GBDragBoxHead').height() + GBMaxDragBoxHeight + "px"});
					$('#' + ui.item.context.id + ' .GBDragBoxContent').css({ "max-height": GBMaxDragBoxHeight + "px"});
				},
				stop : function(event,ui){
					$('#' + ui.item.context.id).css({ "max-height": "none" });
					$('#' + ui.item.context.id + ' .GBDragBoxContent').css({ "max-height": "none"});
				},
				receive: function(event, ui) {

					
					
    			}
				
			});
				
			//sidebar.	
			$( ".sideBarDraggable" ).sortable({
				connectWith: ".GearboxContentArea",
				items: "> .GBDragBox",
				delay: 150,
				forcePlaceholderSize: true,
				tolerance: "pointer",
		      	update: function(event, ui) {
            		var start_pos = ui.item.data('start_pos');
           			var end_pos = ($(ui.item).index());
            		updateArray(targetCol);
            		originalCol = "";
					targetCol = "";
					
        		},
				start :...