JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div class="gridster">
    <div class="trashcan"></div>
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">Gridster 1</li>
    </ul>
    
</div>

<div id="log"></div>

CSS

.trashcan { height:100%; min-height:65px; width: 115px; background: yellow; float: right;   z-index:100}
.gridster {

    position:relative;
    max-width:550px;
    background-color: gray;

}

li {

    background-color: white;

    width: 150px;

    height: 100%;

    border: solid 2px black;
}

.gridster .preview-holder {
opacity: 0;
}

JavaScript

var gridster;

      $(function(){

        var log = document.getElementById('log');

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          draggable: {
             stop: function(e, ui, $widget) {
             console.log(ui);
                if (ui.position.left >435 ) gridster.remove_widget(ui.$helper[0]);
            }
          }
        }).data('gridster');


      });