JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="droppable">Drop area</div>
<hr>
<div class="draggable">Draggable</div>
<hr>
<ul class="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

CSS

.droppable { display: inline-block; padding: 10px; border: 1px solid black; }
.draggable { display: inline-block; padding: 10px; border: 1px solid green; }
.droppable.active-droppable { background-color: #88ff88; }

JavaScript

$(function(){
    $('.sortable').sortable();
    $('.droppable').droppable({activeClass:'active-droppable',deactivate:function(){console.log('deactivate');},drop:function(){console.log('drop');}});
    $('.draggable').draggable({revert:true,connectToSortable:'.sortable'});
});