JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/RubaXa/Sortable/master/Sortable.min.js"></script>

<ul id="outer-draggables">
    <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

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

JavaScript

$('#inner-iframe').load(function () {

var elOuter = document.getElementById('outer-draggables');
Sortable.create(elOuter, {
  group: 'sortable-group'
});

var elInner = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable');
Sortable.create(elInner, {
  group: 'sortable-group'
});

var elInner2 = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable2');
Sortable.create(elInner2, {
  group: 'sortable-group'
});

/*
    $('.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 } 
    });
    */
});