JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div class="panel" style="top:50px; left:10px">
	<div class="content">
		<div class="sub-panel"></div>
		<div class="sub-panel"></div>
	</div>
</div>

<div class="panel" style="top:70px; left:250px">
	<div class="content">
		<div class="sub-panel">
		</div>
	</div>
</div

CSS

.panel {
	position: absolute;
	background: gray;
	width: 100px;
	min-width: 100px;
	min-height: 100px;
	padding: 10px;
	padding-top: 20px;
}

.sub-panel {
	background: silver;
	min-width: 100px;
	min-height: 100px;
	margin: 5px;
}

.content {
	min-width: 100px;
	min-height: 50px;
}

JavaScript

$('.content')
	.sortable({
		connectWith: '.content',

        over: function(e, ui){
			ui.item.css('background', '')
		},
        stop: function(e, ui){
			ui.item.css('background', '')
		},
        out: function(e, ui){
            ui.item.css('background', 'blue')
		},
	})