JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <caption>Unassigned</caption>
    <tbody>
        <tr>
            <td id="A" draggable="true" data-scheduled="false" data-rows="2">
                Item A
                <a href="">✖</a>
            </td>
        </tr>
        <tr>
            <td id="B" draggable="true" data-scheduled="false" data-rows="3">
                Item B
                <a href="">✖</a>
            </td>
        </tr>
        <tr>
            <td id="C" draggable="true" data-scheduled="false" data-rows="4">
                Item C
                <a href="">✖</a>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <caption>Schedule</caption>
    <thead>
        <tr>
            <th></th>
            <th>John Doe</th>
            <th>Jane Doe</th>
            <th>John Smith</th>
            <th>Jane Smith</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12:00 AM</td>
            <td class="1" id="D" draggable="true" data-rows="1">
                Item D
                <a href="">✖</a>
            </td>
            <td class="2" draggable="true"></td>
            <td class="3" draggable="true"></td>
            <td class="4" draggable="true"></td>
            <td>12:00 AM</td>
        </tr>
        <tr>
            <td>12:30 AM</td>
            <td class="1" draggable="true"></td>
            <td class="2" draggable="true"></td>
            <td class="3" draggable="true"></td>
            <td class="4" draggable="true"></td>
            <td>12:30 AM</td>
        </tr>
        <tr>
            <td>1:00 AM</td>
            <td class="1" draggable="true"></td>
            <td class="2" draggable="true"></td>
            <td class="3" draggable="true"></td>
            <td class="4" draggable="true"></td>
            <td>1:00 AM</td>
        </tr>
        <tr>
            <td>1:30 AM</td>
            <td class="1" draggable="true"></td>
            <td class="2" draggable="true"></td>
            <td class="3"...

CSS

body {
    padding: 32px;
}

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #CCC;
    padding: 4px;
}

table:first-child {
    float: left;
    margin-right: 32px;
}

table:first-child a {
    display: none;
}

.drop {
    background-color: #EEE;
}

[draggable] {
    cursor: move;
}

JavaScript

var tbody1 = null;
var tbody2 = null;

var Indecies = function (td) {
    var tr = td.parent();
    var tbody = tr.parent();
    
    var row = tbody.children().index(tr);
    var column = tr.children().index(td);
    
    return [row, column];
};

$(function () {
    tbody1 = $("table:first-child tbody");
    tbody2 = $("table:last-child tbody");
    
    $("[draggable]").live("dragstart", function (e) {
        e.originalEvent.dataTransfer.effectAllowed = "move";
        e.originalEvent.dataTransfer.setData("text", this.id);
    });
    
    var scheduledTds = tbody2.find("td:not(:first-child):not(:last-child)");
    
    scheduledTds.each(function () {
        $(this).data("scheduled", true);
    }).live("dragover", function (e) {
        e.preventDefault();
        
        e.originalEvent.dataTransfer.dropEffect = "move";
        
        $(this).addClass("drop");
    }).live("dragleave", function (e) {
        $(this).removeClass("drop");
    }).live("drop", function (e) {
        e.preventDefault();
        
        var source = $("#" + e.originalEvent.dataTransfer.getData("text"));
        var target = $(this);
        
        var scheduled = source.data("scheduled");
        var rows = source.data("rows");
        var afterCell = null;
        var afterSelector = "";
        var removeSelector = "";
        
        if (scheduled) {
            // Source cell is inside the Schedule table
            if (rows > 1) {
                // Get the indecies of the source cell
                var indecies = Indecies(source);
                // Get the row index of the source cell
                var row = indecies[0];
                // Get the column index of the source cell
                var column = indecies[1];
            
                if (afterCell == null) {
                    afterCell = $("<td class=\"" + column + "\" draggable=\"true\" />");
                };
            
                // Decriment the column variable for use in the...