JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
    <div class="pin">0</div>
    <div class="grid col-head">1</div>
    <div class="grid col-head" div="9">2</div>
    <div class="grid col-head">3</div>
    <div class="grid row-head">4</div>
    <div class="grid">5</div>
    <div class="grid">6</div>
    <div class="grid">7</div>
    <div class="grid row-head">8</div>
    <div class="grid">9</div>
    <div class="grid">10</div>
    <div class="grid">11</div>
    <div class="grid row-head">12</div>
    <div class="grid">13</div>
    <div class="grid">14</div>
    <div class="grid">15</div>
</div>

CSS

.container {
        width:600px;
        height: 600px;
        /*position:fixed;*/
        /*background:#CCC;*/
        /*padding:10px 0 10px;*/
}
.pin,.grid {
        float:left;
        /*overflow: auto;*/
        margin:0 10px 10px 0;
        border:1px solid #333;
        background:#3E9;
        width:128px;
        height:128px;
        font-weight:bold;
        text-align:center;
        line-height:128px;
        /*list-style-type: none;*/
}
.grid.over {
  border: 2px dashed #000;
}
.red {
    opacity:0.2;
}

JavaScript

var placeholder;
$(document).ready(function () {
    makeDraggable();
    function makeDraggable() {
        $(".grid").draggable({
            helper: "clone",
            start: function(e) {
              placeholder = e.target;
              $(placeholder).addClass("red");
            },
            stop: function(e,ui){
              $(placeholder).removeClass("red");
              placeholder = null;
              
              alert($(this).index());
            }  
            
        });
        $(".grid").droppable({
            drop: function (e, ui) {
                $(placeholder).removeClass("red");
                placeholder = null;
                $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);
                
                alert($(ui.draggable).index());
                makeDraggable();
            },
        });
    }
})