JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="draggable">
	<li>Drag me down</li>
  <li>Drag me too</li>
</ul>

<p>Sortable:</p>
<ul id="sortable" class="ui-sortable">
	<li class="ui-state-default ui-sortable-handle">Item 1</li>
	<li class="ui-state-default ui-sortable-handle">Item 2</li>
	<li class="ui-state-default ui-sortable-handle">Item 3</li>
	<li class="ui-state-default ui-sortable-handle">Item 4</li>
	<li class="ui-state-default ui-sortable-handle">Item 5</li>
</ul>

CSS

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
	li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$( function() {
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable li" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
    $('#sortable li').click(function() {
    	alert('Sortable item Clicked!');
     });
	} );