JSFiddle - React, Tailwind, and code Playground

by peterjc

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://raw.github.com/ducksboard/gridster.js/master/dist/jquery.gridster.min.css">
<script src="https://rawgithub.com/maxgalbu/gridster.js/master/dist/jquery.gridster.js"></script>
<div class="layouts_grid" id="layouts_grid">
<ul>
<li class="layout_block" data-id="7" data-row="1" data-col="1" data-sizex="1" data-sizey="1" style="background-color: #D24726;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Logo</span>
</div>    
</li>
<li class="layout_block" data-id="2" data-row="1" data-col="2" data-sizex="5" data-sizey="1" style="background-color: #15992A;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Ads top</span>
</div>    
</li>
<li class="layout_block" data-id="13" data-row="2" data-col="1" data-sizex="4" data-sizey="1" style="background-color: #B60000;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Ads small</span>
</div>    
</li>
<li class="layout_block" data-id="5" data-row="2" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #666666;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Ads right</span>
</div>    
</li>
<li class="layout_block" data-id="1" data-row="3" data-col="1" data-sizex="4" data-sizey="2" style="background-color: #333333;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">Main</span>
</div>    
</li>
<li class="layout_block" data-id="6" data-row="5" data-col="1" data-sizex="4" data-sizey="3" style="background-color: #008299;">
<div class="remove_element">X</div>
<div class="info">
<span class="block_name">User photos</span>
</div>    
</li>
<li class="layout_block" data-id="3" data-row="5" data-col="5"...

CSS

.additional_element {
    margin: 5px;
    padding: 5px;
    color: white;
    cursor: pointer;
}

.grid_elements {
    width: 300px;
    float: left;
}
.grid_elements table {
    border-collapse: separate;
    width: 200px;
    height: 200px;
}
.actions_block {
    padding: 9px;
    float: right
}

.grid_elements table td {
    background-color: #CFCFCF;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
}

.grid_elements table td.hover {
    background-color: #999;
}

.grid_elements table td:hover {
    cursor: pointer;
}

.layout_block .block_name {
    cursor: pointer;
}

.ui-resizable-resizing {
    z-index: 9999999 !important;
}

.layout_name_edit {
    background-color: inherit;
    background: url( '../media/images/icons/edit_input.gif' );
    background-repeat: no-repeat;
    background-position: 0 center;
    padding: 0px;
    margin: 0px;
    padding-left: 14px;
    border: none;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    outline: none;
    width: 90%;
    font-style: italic;
    cursor: text !important;
}
.layouts_grid .remove_element {
    float: right;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    cursor: pointer;
    margin: 3px 0px 4px 4px;
}
.layouts_grid .layout_block .info {
    color: white;
    font-size: 16px;
    font-family: Helvetica;
    padding: 10px;
}
/*! gridster.js - v0.1.0 - 2012-10-07
* http://gridster.net/
* Copyright (c) 2012 ducksboard; Licensed MIT */

.layouts_grid {
    position:relative !important;
    width: 700px;
    min-height: 300px;
    float: left;
}

.layouts_grid > * {
    margin: 0 auto;
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
    transition: height .4s;
}

.layouts_grid ul {
    list-style-type: none;
    min-height:...

JavaScript

var layout;
var grid_size = 100;
var grid_margin = 5;
var block_params = {
    max_width: 6,
    max_height: 6
};
$(function() {

    layout = $('.layouts_grid ul').gridster({
        widget_margins: [grid_margin, grid_margin],
        widget_base_dimensions: [grid_size, grid_size],
        serialize_params: function($w, wgd) {
            return {
                x: wgd.col,
                y: wgd.row,
                width: wgd.size_x,
                height: wgd.size_y,
                id: $($w).attr('data-id'),
                name: $($w).find('.block_name').html(),
            };
        },
        min_rows: block_params.max_height
    }).data('gridster');

    $('.layout_block').resizable({
        grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
        animate: false,
        minWidth: grid_size,
        minHeight: grid_size,
        containment: '#layouts_grid ul',
        autoHide: true,
        stop: function(event, ui) {
            var resized = $(this);
            setTimeout(function() {
                resizeBlock(resized);
            }, 300);
        }
    });

    $('.ui-resizable-handle').hover(function() {
        layout.disable();
    }, function() {

        layout.enable();
    });

    function resizeBlock(elmObj) {

        var elmObj = $(elmObj);
        var w = elmObj.width() - grid_size;
        var h = elmObj.height() - grid_size;

        for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

            grid_w++;
        }

        for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

            grid_h++;
        }

        layout.resize_widget(elmObj, grid_w, grid_h);
    }
});