JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list1" class="lists">
	
</ul>

<ul id="list2" class="lists">
	
</ul>

CSS

.lists
{
	height: 200px;
	width: 300px;
	border: 1px solid #000000;
}

JavaScript

$(document).ready(function()
	{
		addElements();
	}
);

function addElements()
{
	$("#list1").empty().append(
		"<li id='item1' class='list1Items'>Item 1</li>"+
		"<li id='item2' class='list1Items'>Item 2</li>"+
		"<li id='item3' class='list1Items'>Item 3</li>"
	);
    // there's the gallery and the trash
	var $gallery = $( "#list1" );
	
	
	// let the gallery items be draggable
	$( "li", $gallery ).draggable({
		cancel: "button", // these elements won't initiate dragging
		revert: "invalid", // when not dropped, the item will revert back to its initial position
		containment: "document",
		helper: "clone",
		cursor: "move"
	});
}

$(function() {
	
	var $trash = $( "#list2" );
	// let the trash be droppable, accepting the gallery items
	$trash.droppable({
		accept: "#list1 > li",
		drop: function( event, ui ) {
			$("#list2").append(ui.draggable);
			addElements();
	}
	});

  
});