JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trash">
	<li class="list4"><a href="#" >Trash</a></li>
	</div>
</div>
</ul>


</div>

<div id="content">

	<ul id = "items">
		<li class="contentItem"><a href="#" >LearnJava.pdf</a></li>
		<li class="contentItem"><a href="#" >CompSetup.jpeg</a></li>
		<li class="contentItem"><a href="#" >Chrome.exe</a></li>
		<li class="contentItem"><a href="#" >Steam.dll</a></li>
		<li class="contentItem"><a href="#" >Icon.png</a></li>
		
	</ul>

</div>

CSS

#content {padding-top: 10px;}

#content li {list-style: none; margin: 10px 0px 10px 182px;}

#content a {text-decoration: none; margin-left:28px; margin-top: 30px;}

.active {box-shadow: 0px 1px 5px 0px rgb(50,50,50);}

.contentItem.active.ui-draggable-dragging {box-shadow: none;}

.list4 {background:  url("http://cdn3.iconfinder.com/data/icons/line/36/trash_can-16.png") top left 
no-repeat; padding-left: 20px; border: 1px solid #000; padding-bottom: 10px;}

JavaScript

$( init )

    function init() {
    $(".contentItem").draggable({ revert: 'invalid' });
    $(".list4").droppable( {
    	drop: handleDropEvent
    });
	}

    function handleDropEvent ( event, ui ) {
    	var draggable = ui.draggable;
    	alert("Gone")
    }