JSFiddle - React, Tailwind, and code Playground

HTML

<h2><a href="#">MY LIST</a></h2>

	<ul id="myproducts">
		<li>
			<div class="cmd_text">
				<label>1</label>

			</div>					
		</li>
		<li>
			<div class="cmd_text">
				<label>2</label>
			</div>					
		</li>
		<li>
			<div class="cmd_text">
				<label>3</label>
			</div>					
		</li>		
		<li>
			<div class="cmd_text">
				<label>4</label>
			</div>					
		</li>			
	</ul>

	<h2><a href="#">MY SORTABLE</a></h2>
			
	<ul id="mylist">			
			
	</ul>

CSS

ul {
			list-style-type: none; 
		}
		
		li {
			display: inline-block;
		}
		
		
		#mylist {			    
			height: 100px;
			padding: 10px 10px 10px 50px;
			background-color: #F0EEEE;
		}

		#mylist li{		
			height: inherit;
			display: inline-block;
			padding-right: 20px;
		}
		.sortable-placeholder {
			width: 100px;
			height: 30px;
			background-color: red;
		}
		
		.cmd_text {
			display: table-cell;
			vertical-align: middle;
			height: 100px;				
			width: 100px;
			background-color: #f7f7f7;
		}
		.cmd_text label{
			display:inline;
			
		}

JavaScript

$(function () {			
			$("#myproducts li").draggable({
				/*appendTo: "body",*/
				helper: "clone",
				connectToSortable: "#mylist",
				tolerance: "pointer"
			});
			$("#mylist").sortable({
				placeholder: "sortable-placeholder", 
				
				over: function () {
					console.log("over");

				},
				out: function () {
					console.log("out");
				}
			});
		});