JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="draggable">
	<li>Drag me down<button class='remove'>X</button></li>
  <li>Drag me too<button class='remove'>X</button></li>
</ul>

<p>Sortable:</p>
<ul id="sortable" class="ui-sortable">
<li class="ui-state-default ui-sortable-handle">Item 1<button class='remove'>X</button></li>
	<li class="ui-state-default ui-sortable-handle">Item 2<button class='remove'>X</button></li>
	<li class="ui-state-default ui-sortable-handle">Item 3<button class='remove'>X</button></li>
</ul>

CSS

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

JavaScript

$( function() {
		$( "#sortable" ).sortable({
			revert: true
		});
		$( "#draggable li" ).draggable({
			connectToSortable: "#sortable",
			helper: "clone",
			revert: "invalid"
		});
		$( "ul, li" ).disableSelection();
    $('#sortable').on('click','li',function() {
    	console.log('Sortable item Clicked!');
     });
    $('#sortable').on('click','li .remove',function(e) {
      e.stopPropagation();
    	$(this).parent().remove();
     });
	} );