JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="container">
    <iframe src="http://fiddle.jshell.net/tj_vantoll/R6LtZ/show/"></iframe>
</div>
<div id="drag"></div>

CSS

#container {
    width: 400px;
    height: 200px;
    overflow: auto;
}
#drag {
    height: 20px;
    width: 20px;
    background: gray;
}
iframe {
    height: 400px;
    width: 400px;
}

JavaScript

$( function() {
    $( "iframe" ).load(function () {
        var iframe = $(this).contents();
        iframe.find( "#iframe_container" ).droppable({
            iframeFix: true,
            drop: function ( event, ui ) { alert( "dropped" ); }
         });
    });
    
    $( "#drag" ).draggable({ iframeFix: true });
});