JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="div1" class="parte1" style="color:black">
        <p> Conteúdo da Div 1</p>
    </div>
    <div id="div2" class="parte2" style="color:blue">
        <p> Conteúdo da Div 2</p>
    </div>
    <div id="div3" class="parte3" style="color:red">
        <p> Conteúdo da Div 3</p>
    </div>
    <div id="div4" class="parte4" style="color:green">
        <p> Conteúdo da Div 4</p>
    </div>
    <hr/>
    <ul>
        <li id="A">item A</li>
        <li id="B">item B</li>
        <ul>
            <li id="B1">item B1</li>
            <li id="B2">item B2</li>
            <li id="B3">item B3</li>
        </ul>
        <li id="C">item C</li>
    </ul>
 </body>

JavaScript

(function ($) {
    
    $.fn.swap = function(anotherElement) {
        
        var sameParentStrategy = function(one, another) {
            var oneIndex = one.index();
            var anotherIndex = another.index();
            var swapFunction = function(first, second, firstIndex, secondIndex) {
                if (firstIndex == secondIndex - 1) {
                    first.insertAfter(second);
                } else {
                    var secondPrevious = second.prev();
                    second.insertAfter(first);
                    first.insertAfter(secondPrevious);
                }
            }
            if (oneIndex < anotherIndex) {
                swapFunction(one, another, oneIndex, anotherIndex);
            } else {
                swapFunction(another, one, anotherIndex, oneIndex);
            }
        };
        
        var differentParentsStrategy = function(one, another) {
            var positionStrategy = function(e) {
                var previous = e.prev();
                var next = e.next();
                var parent = e.parent();
                if (previous.length > 0) {
                    return function(e) {
                        e.insertAfter(previous);
                    };
                } else if (next.length > 0) {
                    return function(e) {
                        e.insertBefore(next);
                    };
                } else {
                    return function(e) {
                        parent.append(e);
                    };
                }
            }
            var oneStrategy = positionStrategy(one);
            var anotherStrategy = positionStrategy(another);
            oneStrategy(another);
            anotherStrategy(one);
            return this;
        };
                
        //check better strategy
        var one = $(this);
        var another = $(anotherElement);
        if (one.parent().get(0) == another.parent().get(0)) {
           ...