JSFiddle - React, Tailwind, and code Playground

by ph34r

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.3/gridstack.js"></script>
<div class="grid-stack"></div>

CSS

body{
    background-color:green; 
}

.grid-stack-item{
   background-color:white; 
    margin: 5px;
}

JavaScript

$(function () {
    var options = {
        cell_height: 80,
        vertical_margin: 10,
        animate: true,
        width: 5,
        draggable: {handle: '.widget-header', scroll: true, appendTo: 'body'}
    };

    $('.grid-stack').gridstack(options);

    var grid = $('.grid-stack').data('gridstack');

    var draggableHeader = "<div class='widget-header' style='height:20px; width:100%; border: 1px solid black;'>Draggable Header</div>";
    
    grid.add_widget("<div class='grid-stack-item'>" + draggableHeader + "<div>1</div></div>", 0, 8, 5, 1, false);
    grid.add_widget("<div class='grid-stack-item'>" + draggableHeader + "<div>1</div></div>", 0, 0, 2, 1, false);
    grid.add_widget("<div class='grid-stack-item'>" + draggableHeader + "<div>1</div></div>", 0, 0, 1, 1, false);
    grid.add_widget("<div class='grid-stack-item'>" + draggableHeader + "<div>1</div></div>", 0, 0, 2, 1, false);
    grid.add_widget("<div class='grid-stack-item'>" + draggableHeader + "<div>5</div></div>", 0, 8, 5, 1, false);

});