Swappable vs. Sortable

HTML

<html>
<head>
    <script type="text/javascript">
        
        jQuery.fn.swapWith = function(to) {
            return this.each(function() {
                var copy_to = $(to).clone();
                var copy_from = $(this).clone();
                $(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(function(){
                    $('#one').swapWith($('#two'));
                    $("li").draggable(options);
                }, 600);
                }
            });
        });

    </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>

CSS

#wrapper {
   border: thin dotted orange;   
}