JSFiddle - React, Tailwind, and code Playground

by Alain Dumesny

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="row">
  <div class="col-12">
    <div class="grid-stack">
      <div class="grid-stack-item" gs-w=2 gs-h=2>
        <div class="grid-stack-item-content">
          Content 1
        </div>
      </div>
     
    </div>
  </div>
  <div class="col-12 m-3" id="pallet">
    <div class="grid-stack-item">
      <div class="grid-stack-item-content">
        Item To Add
      </div>
    </div>
  </div>
  <div class="col-12 m-3">
    <div class="trash">
        Trash can
    </div>
  </div>
  <div class="col-12">
     <a href="#">Click Here to Destroy and instantiate</a>
  </div>
</div>

CSS

.grid-stack-item{
  border: 1px solid black;
}

JavaScript

var option = {
        margin:0,
        column:12,
        row:10,
        cellHeight: 20,
        disableOneColumnMode:true,
        removable:'.trash',
        removableOptions:{decline:'otherClass'},
        float: true,
        acceptWidgets:function (el){
            return true;
        },
    }
    
    grid = GridStack.initAll(option)
   GridStack.setupDragIn('#pallet .grid-stack-item',{appendTo:'body',helper:'clone'})
   
  $('a').on('click',function(){
 
  	option.cellHeigth = 50;
		grid[0].destroy(false)
    grid = GridStack.initAll(option);
  })