JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<ul>
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>
<iframe frameborder="0" id="inner-iframe" src="/nocohhgt/2/show"></iframe>

CSS

#inner-iframe {
    width: 100%;
    height: 400px;
}

JavaScript

$('#inner-iframe').load(function () {
    $('.draggable').draggable({
        appendTo: 'body',
        helper: 'clone',
        iframeFix: true,
        revert: 'invalid',
        connectToSortable: $('#inner-iframe').contents().find('.sortable'),
        cursorAt: { top: 0, left: 0 } 
    });

    var mycontainers = $('#inner-iframe').contents().find('.sortable');
    mycontainers.sortable({
        connectWith: mycontainers,
        cursorAt: { top: 0, left: 0 } 
    });
});