JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="paginas"></div>

CSS

.paginas {
    right: 200px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: scroll;
}
.pagina {
    width: 595px;
    height: 842px;
    border: 1px solid green;
    margin: 5px auto;
    border: 1px solid #b2b2b2;
    border-right: 2px solid #6f6f6f;
    border-bottom: 2px solid #6f6f6f;
}

.ui-draggable { border:1px solid red; }
.container { border:1px solid blue; }

JavaScript

var MR = {
    init: function(){
        MR.carregar();
    },
    carregar: function(){
        p = this.addPagina();
        c = this.add(p, '<div class="container"></div>', 20, 20, 200, 200);
        this.add(c, '<label>Label 1 <i>opa</i></label>', 20, 20);
        this.add(c, '<label>Label 2 <i>opa</i></label>', 40, 20);
        
        this.eventos($(".paginas"));
    },
    addPagina: function(){
        var o = $('<div class="pagina"></div>');
        $(".paginas").append(o);
        return o;
    },
    add: function(onde, html, x, y, w ,h){
        var o = $(html).css({
            position: 'relative',
            left: x,
            top: y
        });
        if (typeof w != 'undefined' && typeof h != 'undefined')
            o.css({width: w, height: h});
        onde.append(o);
        return o;
    },
    eventos: function(o){
        o = o.get();
        $(".container > *, .pagina > *", o).draggable({
            containment: 'parent',
            grid: [1, 1],
            refreshPositions: true
        });
        $(".container", o).resizable({
            containment: 'parent'
        });
    }
};

$(MR.init);