JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/bramstein/column-selector/master/lib/jquery.column.js"></script>
<div>
    <table id="Unscheduled">
        <caption>Unscheduled</caption>
        <tbody>
            <tr>
                <td id="A" data-rows="2" data-url="">
                    Item A
                    <a href="">✖</a>
                </td>
            </tr>
            <tr>
                <td id="B" data-rows="3" data-url="">
                    Item B
                    <a href="">✖</a>
                </td>
            </tr>
            <tr>
                <td id="D" data-rows="4" data-url="">
                    Item D
                    <a href="">✖</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="Scheduled">
        <caption>Scheduled</caption>
        <thead>
            <tr>
                <th></th>
                <th>John Doe</th>
                <th>Jane Doe</th>
                <th>John Smith</th>
                <th>Jane Smith</th>
                <th>John Roberts</th>
                <th>Jane Roberts</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr data-time="12:00 AM">
                <th scope="row">12:00 AM</th>
                <td id="C" data-rows="1" data-url="">
                    Item C
                    <a href="">✖</a>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th scope="row">12:00 AM</th>
            </tr>
            <tr data-time="12:30 AM">
                <th scope="row">12:30 AM</th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <th scope="row">12:30 AM</th>
            </tr>
            <tr data-time="1:00 AM">
                <th scope="row">1:00 AM</th>
                <td></td>
     ...

CSS

table {
    border-collapse: collapse;
    margin: 32px;
}

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

th {
    color: red;
}

td.Droppable {
    background-color: #EEE;
}

div table {
    display: inline-block;
    vertical-align: top;
}

div table:first-child {
    margin-right: 0;
}

hr {
    border: none;
    border-top: 1px solid #CCC;
    margin: 0 32px;
}

p {
    margin: 8px 32px;
}

p label {
    display: inline-block;
    width: 100px;
}

[draggable] {
    cursor: move;
}

#Unscheduled a {
    display: none;
}

JavaScript

if (console.clear) {
    console.clear();
};

var unscheduledTbody = null,
    scheduledTbody = null,
    isDroppable = true;

/// Work around for Chrome and Safari (maybe Opera, not 100% sure). Apparently WebKit (or was it the Chromium dev team) decided it was a good idea to avoid initializing the dataTransfer.getData object on the dragend event (also on dragstart it appears). Thus I have to use a global variable to get around it. Good job guys, that's two things you've failed on on an already difficult to implement API that's been around for years...
var dataTransferValue = null;

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

var CheckCellRowspan = function (options) {
    var element = null;
    
    for (var i = 1; i < options.rows; i++) {
        element = scheduledTbody.find("tr:eq(" + (options.row + i) + ") td." + options.column);
        
        if (element.attr("id") != null) {
            isDroppable = false;
            
            return;
        };
    };
    
    element = null;
    
    isDroppable = true;
};

var ToggleCellVisibility = function (options) {
    var selectors = "",
        i = 1;
    
    for (i; i < options.rows; i++) {
        if (options.hide) {
            selectors = (selectors + ("tr:eq(" + (options.row + i) + ") td." + options.column + ","));
        } else {
            selectors = (selectors + ("tr:eq(" + (options.row + i) + ") td." + options.column + ":hidden,"));
        };
    };
    
    selectors = selectors.substring(0, (selectors.length - 1));
    
    if (selectors.length > 0) {
        scheduledTbody.find(selectors).css({
            display: (options.hide ? "none" : "table-cell")
        });
    };
};

var UpdateSchedule = function () {
};

$(function () {
    /// Add draggable="true" to all potential cells
    $("#Unscheduled tbody...