JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <caption>Customers</caption>
    <tbody>
        <tr>
            <td id="DoeJohn" draggable="true" data-rows="2" data-row="" data-column="" data-old-row="" data-old-column="" data-scheduled="false">
                Doe, John
                <a href="">✖</a>
            </td>
        </tr>
        <tr>
            <td id="DoeJane" draggable="true" data-rows="3" data-row="" data-column="" data-old-row="" data-old-column="" data-scheduled="false">
                Doe, Jane
                <a href="">✖</a>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <caption>Schedule</caption>
    <thead>
        <tr>
            <th></th>
            <th>John Doe</th>
            <th>Jane Doe</th>
        </tr>
    </thead>
    <tbody>
        <tr data-time="12:00 AM">
            <td>12:00 AM</td>
            <td id="DohnJoe" draggable="true" data-rows="1" data-row="0" data-column="1" data-old-row="" data-old-column="" data-scheduled="true">
                Dohn, Joe
                <a href="">✖</a>
            </td>
            <td></td>
        </tr>
        <tr data-time="12:30 AM">
            <td>12:30 AM</td>
            <td></td>
            <td></td>
        </tr>
        <tr data-time="1:00 AM">
            <td>1:00 AM</td>
            <td></td>
            <td></td>
        </tr>
        <tr data-time="1:30 AM">
            <td>1:30 AM</td>
            <td></td>
            <td></td>
        </tr>
        <tr data-time="2:00 AM">
            <td>2:00 AM</td>
            <td></td>
            <td></td>
        </tr>
        <tr data-time="2:30 AM">
            <td>2:30 AM</td>
            <td></td>
            <td></td>
        </tr>
        <tr data-time="3:00 AM">
            <td>3:00 AM</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

body {
    padding: 32px;
}

[draggable] {
    cursor: move;
}

.over {
    background-color: #EEE;
}

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

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

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

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

JavaScript

var tbody1 = null;
var tbody2 = null;

$(function () {
    $("[draggable]").each(function () {
        var td = $(this);
        
        td.bind("dragstart", function (e) {
            e.originalEvent.dataTransfer.effectAllowed = "move";
            e.originalEvent.dataTransfer.setData("text", this.id);
        });
    });
    
    tbody2 = $("table:eq(1) tbody");
    var scheduleCells = $("table:eq(1) td:not(:first-child)");
    
    scheduleCells.find("a").live("click", function (e) {
        e.preventDefault();
        
        RemoveTd(this);
    });
    
    scheduleCells.live("dragover", function (e) {
        e.preventDefault();
        
        e.originalEvent.dataTransfer.dropEffect = "move";
        
        $(this).addClass("over");
    });
    
    scheduleCells.live("dragleave", function (e) {
        $(this).removeClass("over");
    });
    
    scheduleCells.live("drop", function (e) {
        e.preventDefault();
        
        var td1 = $("#" + e.originalEvent.dataTransfer.getData("text"));
        var tr1 = td1.parent();
        var td2 = $(this);
        var rows = td1.data("rows");
        
        if (td2.is(":empty")) {
            UpdateTdIndecies(td1, td2);
        };
        
        var row = td1.data("row");
        var column = td1.data("column");
        
        for (var i = 1; i < rows; i++) {
            tbody2.find("tr:eq(" + (row + i) + ")").find("td:eq(" + column + ")").remove();
        };
        
        td2.replaceWith(td1.attr("rowspan", rows));
        
        CleanTbody(tr1);
    });
    
    tbody1 = $("table:eq(0) tbody");
});

var CleanTbody = function (tr) {
    tr.remove();
};

var RemoveTd = function (element) {
    var td = $(element).parent();
    var rows = td.data("rows");
    var row = td.data("row");
    var column = td.data("column");
    
    console.log("column: " + column);
    
    for (var i = 0; i < rows; i++) {
        console.log(tbody2.find("tr:eq(" + (row + i) + ")").find("td:eq(" + (column - 1)...