JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<script src="http://gridster.net/demos/assets/jquery.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<div class="container">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
            <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
            <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
            <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
            <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
            <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
            <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
            <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
            <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
        </ul>
    </div>
</div>

CSS

.container {
    height:1600px;
}

JavaScript

var gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 55],
    widget_margins: [5, 5],
    draggable: {
        start: function (e, ui, $widget) {
            var that = this , //to access gridster from inside onscroll
                oldScroll = $(document).scrollTop() //to calculate scroll change 
                obj = $(this.helper ? this.$helper : this.$player) //current draggable or helper
            
            $(document).on("scroll", function () {
                //calculate scroll change
                var curr = $(document).scrollTop()
                var diff = curr-oldScroll
                oldScroll = curr
                //add change to stored offset for gridster
                that.drag_api.el_init_offset.top += diff 
                console.log(diff)
                //show change temporarily
                obj.css({
                    'top': parseFloat(obj.css("top")) + diff
                });
                
            })
        },
        stop: function (e, ui, $widget) {
           $(document).off("scroll")
        }
    }
}).data('gridster');