JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script type="text/javascript">
        
        jQuery.fn.swapWith = function(to) {
            return this.each(function() {
                var copy_to = $(to).clone(true);
                var copy_from = $(this).clone(true);
                $(to).replaceWith(copy_from);
                $(this).replaceWith(copy_to);
            });
        };

        

        $(document).ready(function() {

            options = { revert: true};

            $("li").draggable(options);

            $('#wrapper').droppable({
                drop: function(event, ui) {
                window.setTimeout("Swap()", 600);
                }
            });
        });

        function Swap() {
            $('#one').swapWith($('#two'));
            
            //trying to fix problem where elements can't be dragged anymore
            $("li").draggable("destroy"); 
            $("li").draggable(options);
        }
    </script>

</head>
<body>
    <form>
    <ul id="wrapper">
        <li id='one'>
            <div style="width: 100px; height: 100px; border: 1px solid green">
                one<br /></div>
        </li>
        <li id='two'>
            <div style="width: 110px; height: 110px; border: 1px solid red">
                two<br /></div>
        </li>
    </ul>
    <br />
    </form>
</body>
</html>