JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Section 1</h1>	
	<div class="left">
		<ul class="draggable droppable" data-section="1">
					<li>left 1-1</li>
					<li>left 2-1</li>
					<li>left 3-1</li>
					<li>left 4-1</li>
					<li>left 5-1</li>
				</ul>
	</div>	
	<div class="right">
		<ol class="sortable droppable" data-section="1">
					<li>right 1-1</li>
					<li>right 2-1</li>
					<li>right 3-1</li>
					<li>right 4-1</li>
					<li>right 5-1</li>
				</ol>
	</div>	
		<h1>Section 2</h1>	
	<div class="left">
		<ul class="draggable droppable" data-section="2">
					<li>left 1-2</li>
					<li>left 2-2</li>
					<li>left 3-2</li>
					<li>left 4-2</li>
					<li>left 5-2</li>
				</ul>
	</div>	
	<div class="right">
		<ol class="sortable droppable" data-section="2">
					<li>right 1-2</li>
					<li>right 2-2</li>
					<li>right 3-2</li>
					<li>right 4-2</li>
					<li>right 5-2</li>
				</ol>
	</div>	
		<h1>Section 3</h1>	
	<div class="left">
		<ul class="draggable droppable" data-section="3">
					<li>left 1-3</li>
					<li>left 2-3</li>
					<li>left 3-3</li>
					<li>left 4-3</li>
					<li>left 5-3</li>
				</ul>
	</div>	
	<div class="right">
		<ol class="sortable droppable" data-section="3">
					<li>right 1-3</li>
					<li>right 2-3</li>
					<li>right 3-3</li>
					<li>right 4-3</li>
					<li>right 5-3</li>
				</ol>
	</div>	
		<h1>Section 4</h1>	
	<div class="left">
		<ul class="draggable droppable" data-section="4">
					<li>left 1-4</li>
					<li>left 2-4</li>
					<li>left 3-4</li>
					<li>left 4-4</li>
					<li>left 5-4</li>
				</ul>
	</div>	
	<div class="right">
		<ol class="sortable droppable" data-section="4">
					<li>right 1-4</li>
					<li>right 2-4</li>
					<li>right 3-4</li>
					<li>right 4-4</li>
					<li>right 5-4</li>
				</ol>
	</div>	
		<h1>Section 5</h1>	
	<div class="left">
		<ul class="draggable droppable" data-section="5">
					<li>left 1-5</li>
					<li>left 2-5</li>
					<li>left 3-5</li>
					<li>left 4-5</li>
					<li>left 5-5</li>
				</ul>
	</div>	
	<div...

CSS

.left { float: left; width: 45%; }
.right { float: right; width: 45%; }  
ul.empty, ol.empty { border: 1px solid #ccc; height: 100px; }

JavaScript

$('.sortable').sortable().disableSelection();

		$( ".draggable li" ).draggable({
			revert: true
		});		

		$('.droppable').droppable({
			drop: function(e, ui) {
				var el = $('<li></li>').text($(ui.draggable).text()).appendTo($(this));												

				console.log($(ui.draggable).parent().find('li'));
				if($(ui.draggable).parent().find('li').size() == 1)
					$(ui.draggable).parent().addClass('empty');
				else
					$(ui.draggable).parent().removeClass('empty');

				$(ui.draggable).remove();

				if($(this).find('li').size() == 1)
					$(this).addClass('empty');
				else
					$(this).removeClass('empty');

				if($(this).is('.sortable')) {
					$(this).sortable( "refresh" );
					$(this).sortable( "refreshPositions" );				
				} else {
					$(el).draggable({
						revert: true
					});		
				}

			},
			accept: function(draggable) {
				return $(draggable).parent().data('section') == $(this).data('section') && !$(draggable).parent().is($(this));				
			}
		});