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=1 gs-h=1 gs-min-w="3">
        <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" gs-min-w="3" gs-min-h="2">
      <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">
     <button class="btn btn-default" id="buttonToClick">
       Click Here to Destroy and instantiate
     </button>
  </div>
</div>

CSS

.grid-stack {
  background-color: lightgray;
}

.grid-stack>.grid-stack-item {
  background-color: white;
  border: 1px solid black;
}

#pallet>.grid-stack-item {
  max-width: 100px;
  background-color: lightgreen;
  border: 3px green dashed;
}

.trash {
  max-width: 100px;
  display: flex;
  justify-content: center;
  background-color: salmon;
  border: 3px red dashed;
}

button.btn{
  background-color: lightblue;
  border: 1px solid blue;
  text-decoration: none;
  transition: 1s;
 
}
button.btn:hover{
  transition: 1s;
  color: white;
  background-color: blue;
  border: 1px solid darkblue;
  text-decoration: none;
  transition: 1s;
}

JavaScript

var option = {
        margin:0,
        row:5,
        float: true,
        cellHeight: 30,
        removable:'.trash',
        acceptWidgets: true,
    }
    
    grid = GridStack.init(option);
   GridStack.setupDragIn('#pallet .grid-stack-item',{appendTo:'body',helper:'clone'})
   
   
  $('#buttonToClick').on('click',function(){
		grid.destroy(false)
    option.row = 6;
    grid = GridStack.init(option);
     console.log('try to remove any item by draggin to the trash can and you will see the error.')
  })
  
  
  console.log('add a item,make sure its adding and removing correctly by dragging to the trash can.')
  console.log('when you maked sure its removing, click on the button.')