JSFiddle - React, Tailwind, and code Playground

by Coding Cluster

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<div class="container">
  <div class="draggable-list" style="float:left">
    <div class="draggable-item">
      <div class="img1"></div>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img2"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img3"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img4"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img5"></span>
      <p style="float:right"> Group A </p>
    </div>
  </div>
  <div class="draggable-list" style="float:right">
    <div class="draggable-item"> <span class="img7"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img8"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img9"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img10"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img11"></span>
      <p style="float:right"> Group B </p>
    </div>
  </div>
</div>

CSS

.container {
	width: 400px;
	background-color:#000000;
	border-bottom-color:#003366;
}
.draggable-list {
	background-color: #0066FF;
	list-style: none;
	margin: 0;
	min-height: 70px;
	padding: 10px;
}
.draggable-item {
	background-color: #FFF;
	border: 1px dotted #000;
	cursor: move;
	display: block;
	font-weight: bold;
	color:#CC0033;
	padding-bottom:  70px;
	margin: 5px;
}
.img1 {
	width:76px;
	height: 62px;
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -3.5px -9px;
	float:left;
}
.img2 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -98px -7px;
	width: 70px;
	height: 66px;
	float:left;
}
.img3 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -198px -9px;
	width: 63px;
	height: 58px;
	float:left;
}
.img4 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -3px -99px;
	width: 64px;
	height: 62px;
	float:left;
}
.img5 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -100px -100px;
	width: 68px;
	height: 66px;
	float:left;
}

.img7 {
	width: 68px;
	height: 66px;
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -5px -182px;
	float:left;
}
.img8 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -97px -184px;
	width: 71px;
	height: 64px;
	float:left;
}
.img9 {
	background:url('http://2.bp.blogspot.com/-WdEtllcSgUw/UqXHu0jQ4QI/AAAAAAAAAYA/T6SK2apzY10/s1600/how+to+use+sprite+image.jpg') -194px -187px;
	width: 68px;
	height: 63px;
	float:left;
}
.img10...

JavaScript

$(document).ready(function () {
	$('.container .draggable-list').sortable({
	connectWith: '.container .draggable-list'
	});
});