JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.0/jquery.gridster.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.0/jquery.gridster.min.js"></script>
<div class="gridster">
    <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <form>
            <button>button</button>
        </form>
    </div>
    <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <form>
            <button>button</button>
        </form>
    </div>
    <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        <form>
            <button>button</button>
        </form>
    </div>
    <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
        <form>
            <button>button</button>
        </form>
    </div>
</div>

CSS

.dragMe {
    background:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

JavaScript

var gridster = $('.gridster').gridster({
    widget_margins: [5, 5],
    widget_selector: '.dragMe',
    widget_base_dimensions: [264, 103],
    max_cols: 5,
    max_rows: 5,
    resize: {
        enable: true
    },
    draggable: {
        start: function (event, ui) {
            dragged = 1;
        },
        stop: function (event, ui) {
            var id = this.$helper[0].attributes[0].value;
            var row = this.$helper[0].attributes[1].value;
            var col = this.$helper[0].attributes[2].value;
            console.log(id, row, col);
        },
        items: '.dragMe',
        limit: true
    }
}).data('gridster');