JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <div class="images">
        <ul class="drag-container">
            <li class="section-draggable"><div class="section-drag" id="header1"><p>Header 1</p></div></li>
            <li class="section-draggable"><div class="section-drag" id="header2"><p>Header 2</p></div></li>
            <li class="section-draggable"><div class="section-drag" id="header3"><p>Header 3</p></div></li>
            <li class="section-draggable"><div class="section-drag" id="header4"><p>Header 4</p></div></li>
        </ul>
    </div>

    <div id="content" class="sort-container">
    </div>

CSS

.images {
    width: 300px;
    float: left;
}

.images img {
    width: 100%;
}

#content {
    width: 500px;
    margin-left: 320px;
    border: 1px solid red;
    min-height: 500px;
}

ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
    ul li {
            margin: 5px 10px;
            padding: 0;
            list-style: none;
    }
        ul li img {
                width: 100%;
        }

.section-drag {
    display: block;
    height: auto;
}

.ui-sortable-placeholder {  
    height: auto;  
    background: red; 
    display: block;
    visibility: visible !important;
}

JavaScript

a = null;
$('.drag-container').find('.section-drag').draggable({
    cursor: 'move',
    containment: '#content',
    connectToSortable: '#content',
    appendTo: document.body,
    helper: 'clone'
});


$('.sort-container').sortable({ 
    cursor: 'n-resize',
    revert: true,
    // placeholder: "ui-sortable-placeholder"
    
    receive: function(event, ui) {
        console.log(event);
        alert('ID : ' + ui.item[0].id);
    },
    
});