JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<ul id="categories" class="inf-sortable no-margin ui-sortable">
			<li id="productCategory57" class="top-level-category"> 
				<div class="category-sort category" id="category57">
					<div class="category-column-1">
						<span class="category-display-name">cat1</span>
					</div>				
				</div>
				<ul id="pcSubcategories57" class="sub-category-container inf-sortable ui-sortable">
					
				</ul>
			</li>
			<li id="productCategory66" class="top-level-category">
				<div class="category-sort category" id="category66">
					<div class="category-column-1">
						<span class="category-display-name">cat2</span>
					</div>
				</div>
				<ul id="pcSubcategories66" class="sub-category-container inf-sortable ui-sortable">
					<li id="productCategory76" class="category sub-category-sort">
						<span class="subcategory-display-name">subcat1</span>
					</li>
					<li id="productCategory77" class="category sub-category-sort">
						<span class="subcategory-display-name">subcat2</span>
					</li>
				</ul>			
			</li>
			<li id="productCategory73" class="top-level-category">
				<div class="category-sort category" id="category73">
					<div class="category-column-1">
						<span class="category-display-name">cat3</span>
					</div>
				</div>		
				<ul id="pcSubcategories73" class="sub-category-container inf-sortable ui-sortable">
					<li id="productCategory78" class="category sub-category-sort">
						<span class="subcategory-display-name">subcat3</span>
					</li>
					<li id="productCategory72" class="category sub-category-sort">
						<span class="subcategory-display-name">subcat4</span>
					</li>
				</ul>
			</li>
		</ul>

CSS

#categories li {list-style-type: none;}
		.sort-placeholder-hightlight {
		    background-color: #FFFAF6;
		    border: 1px solid #FFC8A7;
		    height: 22px;
		}

JavaScript

jQuery(document).ready(function() {
			jQuery("#categories").sortable({delay: 100, handle: ".category-sort"});
			jQuery(".sub-category-container").sortable({
			    delay: 100,
			    connectWith: ".sub-category-container",
			    accept: '.sub-category-sort',
			    placeholder:"sort-placeholder-hightlight",
			    activate: function(event, ui) {
				jQuery(this).css('min-height', '20px');
				jQuery(".sub-category-container").bind("sortover", function(event, ui) {
				});
			    }, deactivate: function(event, ui) {

				jQuery(this).css('min-height', '0px');
			    }, start: function(event, ui) {
				ui.item.toggleClass("sort-placeholder-hightlight");
			    }, stop: function(event, ui) {
				ui.item.toggleClass("sort-placeholder-hightlight");
			    }
			});

			jQuery(".sub-category-container").bind('sortover', function(event, ui){
				console.log('sortover');
			});
			jQuery(".sub-category-container").bind('sortupdate', function(event, ui){
				console.log('subcategory move');
			});
			jQuery("#categories").bind('sortupdate', function(event, ui) {
				console.log('category move');
			});		
		});