JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <ul>
        <li>To drop 1</li>
        <li>To drop 2</li>
    </ul>
</div>
<iframe id="frame" src="/dd9wf04w/2/show/" ></iframe>

CSS

#container{
    height:80px;
}
iframe{
    height:600px;
    width:100%;
}
ul{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    border:1px solid;
    padding:5px;
}

JavaScript

var element = jQuery('#frame').contents().find('#sortable');
element.sortable({iframefix:true});
console.log(element);
jQuery( "#container li" ).draggable({
    connectToSortable: element,
    helper: 'clone'
});