JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table id="Unscheduled">
        <caption>Unscheduled</caption>
        <tbody>
            <tr>
                <td id="A" draggable="true" data-scheduled="false" data-rows="2" data-url="">
                    Item A
                    <a href="">✖</a>
                </td>
            </tr>
            <tr>
                <td id="B" draggable="true" data-scheduled="false" data-rows="3" data-url="">
                    Item B
                    <a href="">✖</a>
                </td>
            </tr>
            <tr>
                <td id="D" draggable="true" data-scheduled="false" 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" class="1" draggable="true" data-scheduled="true" data-rows="1" data-url="">
                    Item C
                    <a href="">✖</a>
                </td>
                <td class="2" draggable="true" data-scheduled="true"></td>
                <td class="3" draggable="true" data-scheduled="true"></td>
                <td class="4" draggable="true" data-scheduled="true"></td>
                <td class="5" draggable="true" data-scheduled="true"></td>
                <td class="6" draggable="true" data-scheduled="true"></td>
                <th scope="row">12:00 AM</th>
            </tr>
            <tr data-time="12:30 AM">
                <th scope="row">12:30 AM</th>
                <td...

CSS

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

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

th {
    color: red;
}

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

td.NotDroppable {
    background-color: pink;
}

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

/// TO DO
/// ------------------------------------------------------------------------------------------------------------
/// [ ] If moving above self, avoid rowspan check.
/// [ ] Only show cells no longer occupying.
/// ------------------------------------------------------------------------------------------------------------

//"use strict";

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

var getIndicesOf = function (td) {
    var tr = td.parent(),
        tbody = tr.parent();
        
    var row = tbody.children().index(tr),
        column = tr.children().index(td);
    
    /// Clean up
    tr = null;
    tbody = null;
        
    return [row, column];
};

var verifyRowspan = function (options) {
    var indicies = getIndicesOf(options.td),
        selectors = "",
        elements = null,
        element = null,
        i = 0;
    
    /// Build the selectors string
    for (; i < options.rows; i++) {
        selectors = (selectors + ("tr:eq(" + (indicies[0] + i) + ") td." + indicies[1] + ","));
    }
    
    /// Remove the trailing comma
    selectors = selectors.substring(0, (selectors.length - 1));
    /// Find all elements that match the selectors string
    elements = scheduledTbody.find(selectors);
    
    for (i = 0; i < elements.length; i++) {
        element = elements[i];
        
        if (element.id !== "") {
            /// Clean up
            indicies = null;
            selectors = null;
            elements = null;
            element = null;
            i = null;
            
            return false;
        }
    }
    
    /// Clean up
    indicies = null;
    selectors = null;
    elements = null;
    element = null;
    i = null;
    
    return true;
};

var toggleVisibility = function (options) {
    var indicies = getIndicesOf(options.td),
        selectors = "",
        i = 1;
    
    /// Build the selectors string
    for (; i < options.rows; i++) {
        if (options.hide) {
           ...