JSFiddle - React, Tailwind, and code Playground

HTML

<ul style="position:absolute;right:50px;">
    <li class="draggable">Drag me</li>
    <li class="draggable">Drag me 2</li>
    <li class="draggable">Drag me 3</li>
</ul>
<iframe style="position:absolute;left:150px;width:300px;overflow:hidden;height:300px;" frameborder="0" id="my-frame" src="/b1e902bm/show/"></iframe>

CSS

#my-frame {
    width: 100%;
    height: 300px;
}

JavaScript

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

    $('#my-frame').contents().find('.sortable').sortable({
        iframeFix: true,
        cursorAt: { top: 0, left: 0 } 
    });
});