JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Creator</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.extra.min.css" />
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">


    </head>
    

    
    <body>
        <div class="grid-container">
            <div class="grid-stack" id="left-grid">
                <div class="grid-stack-item" id="Item1" data-gs-x="0" data-gs-y="0" data-gs-width="12" data-gs-height="10">
                    <div class="grid-stack-item-content">
                        <button class="exit">x</button>
                    </div>
                </div>
                
                <div class="grid-stack-item" id="GhostItemLeft" data-gs-x="0" data-gs-y="1" data-gs-width="0" data-gs-height="0" data-gs-no-resize="true" data-gs-no-move="true">
                    <div class="grid-stack-item-content">
                       
                    </div>
                </div>
                
            </div>
            <div class="grid-stack" id="right-grid">
                <div class="grid-stack-item" id="Item1" data-gs-x="0"...

CSS

.grid-container{
    display: grid;
    margin-left: 5%;
    margin-right: 5%;
    grid-template-columns: 15% auto 15%;
    grid-template-rows: 80% 20%;
}

#left-grid{
    grid-column: 1;
    background: #ff0000;
}

#right-grid{
    grid-column: 3;
    background: #ff0000;
}

#bottom-grid{
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    background: #001dff;
}

#Item1{
    background-color: #cccccc;
}

#Item2{
    background-color: #d39c9c;
}

JavaScript

var options = {
    acceptWidgets: true,
    columns: 1,
    height: 11
};

var bottomOptions = {
    acceptWidgets: true,
    maxRows: 1
};

$("#left-grid").gridstack(options);
$("#right-grid").gridstack(options);
$("#bottom-grid").gridstack(bottomOptions);
var grid = $('.grid-stack').data('gridstack');

var totalItems = $('.grid-stack .grid-stack-item');


function getTotalHeight($gridArea) {
    height = 0;
    var items = $($gridArea + " .grid-stack-item");
    for(var i = 0; i < items.length; ++i){
        height = height + parseInt($(items[i]).attr("data-gs-height"));
    }
    console.log(height);
    return height;
}


//exit button function
$(".exit").click(function(){
    var $widget = $(this).closest(".grid-stack-item");
    $(".grid-stack").data("gridstack").removeWidget($widget);
})


//$('.grid-stack').on('change', function(event, items) {
//    if(grid.willItFit(items.x, items.y, items.width, items.height, true)) {
//        console.log("true!")
//    }
//});


$('.grid-stack').on('dragstart', function(event, ui) {
    grid.setStatic(true);
});

$('.grid-stack').on('dropped', function(event, ui) {
    
});

$('.grid-stack').on('dragstop', function(event, ui) {
    
});