JSFiddle - React, Tailwind, and code Playground

by jefferyto

HTML

<iframe align="top" frameborder="0" application="yes" src="" marginheight="0" id="iframe" style="height: 500px; width: 500px; border: 1px solid #000;"></iframe>

JavaScript

$('iframe')
    .load(function() {
        var win = this.contentWindow,
            doc = win.document,
            body = doc.body,
            jQueryLoaded = false,
            jQuery;

        function loadJQueryUI() {
            body.removeChild(jQuery);
            jQuery = null;

            win.jQuery.ajax({
                url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
                dataType: 'script',
                cache: true,
                success: function () {
                    win.jQuery('.sortable').sortable({ cursor: 'move' });
                }
            });
        }

        jQuery = doc.createElement('script');

        // based on https://gist.github.com/getify/603980
        jQuery.onload = jQuery.onreadystatechange = function () {
            if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) {
                return false;
            }
            jQuery.onload = jQuery.onreadystatechange = null;
            jQueryLoaded = true;
            loadJQueryUI();
        };

        jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        body.appendChild(jQuery);
    })
    .prop('src', 'http://fiddle.jshell.net/jefferyto/QtVU6/show/');