JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul id="draggable">
    <li>Item Dragged 1</li>
    <li>Item Dragged 2</li>
    <li>Item Dragged 3</li>
    <li>Item Dragged 4</li>
</ul>

JavaScript

$("#sortable").sortable({
    revert: true,
    revert: 10,
    helper: 'clone',
    receive: function () {
        console.log('receive');
        $("#sortable").sortable("cancel");
    }
});

$("#draggable li").draggable({
    helper: 'clone',
    refreshPositions: true,
    revert: 'invalid',
    connectToSortable: '#sortable'
});