JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<div id="content">
    <div class="portlet">
        <div class="portlet-header"><h6>Portlet 1</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 2</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet fixed">  
        <div class="portlet-header"><h6>Portlet 3 (fixed)</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 4</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 5</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
    <div class="portlet">  
        <div class="portlet-header"><h6>Portlet 6</h6></div>
        <div class="portlet-content">Content Content Content Content Content Content Content Content</div>
    </div>
    
</div>

<div id="cloned_items"></div>

CSS

#content
{
    z-index: 5;
}
.portlet 
{ 
    margin: 0 15px 15px 0; 
    height: 240px;
    width: 25%;
    float:left;
    overflow-x: none;
    position: relative;
}
.portlet-header 
{ 
    margin: 0.3em; 
    padding-bottom: 4px; 
    padding-left: 0.2em; 
}
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; overflow-x: none;}
.ui-sortable-placeholder * { visibility: hidden; background-color: rgb(242, 245, 247); }

#cloned_items {
}

#cloned_items div.portlet {
    position: absolute!important;
    z-index: 1;
}

JavaScript

$(function() {
    
    var lastPosition;
    
    $( "#content" ).sortable({
        delay: 100,
        distance: 10,
        handle: '.portlet-header',
        items: '.portlet:not(.fixed)',
        start: function(e, ui)
        {
            //store the fixed itens position
            $('.fixed', this).each(function(){
                var $this = $(this);
                $this.data('pos', $this.index());
            });
            
            // Identify the item being dragged
            ui.helper.addClass("being-dragged");

            var clonedItems = $("#cloned_items");
            
            // Create a clone for every item, except the fixed ones and the one being dragged            
            $("#content .portlet:not(.being-dragged, .ui-sortable-placeholder, .fixed)").each(function(){
                // clone the original items to make their
                // absolute-positioned counterparts...
                var original = $(this);
                var clone = original.clone();
                // 'store' the clone for later use...
                original.data("clone", clone);
                original.css("visibility", "hidden"); // Hide the original
                
                // set the initial position of the clone
                var position = original.position();
                clone.css("left", position.left)
                     .css("top", position.top);
                
                // append the clone...
                clonedItems.append(clone);
            });
            console.log($("#cloned_items").html());
        },
        change: function(e,ui) 
        {
            //change the position of the fixed elements to the original one
            $sortable = $(this);
            $statics = $('.fixed', this).detach();
            $helper = $('<div class="portlet" style="background-color:#000"></div>').prependTo(this);
            $statics.each(function(){
                var $this = $(this);
                var target...