JSFiddle - React, Tailwind, and code Playground

HTML

<div id="click">click</div>
<ul id="sortable">
    <li class="ui-state-default" id="li-1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default" id="li-3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

CSS

#click {

    background-color:pink;

    width:80px;

    height:20px;

    text-align:center;

}

#sortable {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 60%;

}

#sortable li {

    margin: 0 3px 3px 3px;

    padding: 0.4em;

    padding-left: 1.5em;

    font-size: 1.4em;

    height: 18px;

}

#sortable li span {

    position: absolute;

    margin-left: -1.3em;

}

JavaScript

(function ($) {
    $.fn.changeOrder = function (toIndex, options) {
        //default settings
        var settings = $.extend({
            duration: 500,
            opacity: '0.9'
        }, options);

        return this.each(function () {
            //this = selector
            var $this = $(this),
                index = $this.index(),
                clone = $this.clone(),
                toElement = $this.closest('ul').children().eq(toIndex);

            if (index != toIndex) {
                clone.css({
                    opacity: settings.opacity,
                    position: 'absolute',
                    top: $this.position().top + 'px',
                    width: $this.width() + 'px'
                })
                    .insertBefore($this)
                    .animate({
                    top: toElement.position().top + 'px'
                }, settings.duration, function () {
                    clone.remove();
                    $this.remove();
                    
                    if(toIndex > 0)
                        $this.insertAfter(toElement);
                    else
                        $this.insertBefore(toElement);
                        
                });

            }
        });
    };
}(jQuery));

$(function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();

    $('#click').bind('click', function () {
        $('#li-3').changeOrder(0);
        $('#li-1').changeOrder(2);
    });
});