JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Scheduling Drag-N-Drop App</title>
        <!-- Bring in the jQuery and jQuery UI Libraries -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <!-- Custom Styles and Scripts -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="jquery.ui.multidraggable-1.8.8.js"></script>
        <script type="text/javascript" src="scripts.js"></script>
    </head>
    <body>
        <table id="requirements" class="requirements">
            <thead>
                <tr>
                    <td colspan="26">Requirements</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>2</td>
                    <td>2</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>3</td>
                    <td>2</td>
                </tr>
                <tr>
                    <td class="required">&nbsp;</td>
                    <td class="required">&nbsp;</td>
                    <td class="required">&nbsp;</td>
                    <td class="required">&nbsp;</td>
                   ...

CSS

Body
{
    width: 93.75%;
    margin: 0 auto;
    text-shadow: 0 1px 1px #000;
}

table
{
    width: 100%;
    border: 1px solid #CCC;
    margin-bottom: 10px;
}

td
{
    border: 1px solid #CCC;
    width: 3.56%;
    padding: 0;
    
    box-shadow: 0 -1px 1px #CCC;
}

thead
{
    background-color: GRAY;
    color: WHITE;
    text-align: center;
}

em
{
    background: #3197fc;
    color: WHITE;
    text-shadow: 0 1 1 BLUE;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid BLUE;
    float: right;
}

div
{
    opacity: 1.0;
}

.requirements .required
{
    background-color: RED;
}

.availability .want
{
    background-color: RED;
}

.availability .available
{
    background-color: RED;
}

.availability .busy
{
    background-color: RED;
}

.availability .want div
{
    background-color: #33CC00;
}

.availability .available div
{
    background-color: YELLOW;
}

.availability div
{
    color: #FFF;
    width: 100%;
    text-align: center;
    cursor: move;
}

.confirmed
{
    background-color: #33CC00;
    color: #FFF;
    width: 100%;
    text-align: center;
    cursor: move;
}

.ui-selected
{
    background-color: #336600 !important;
}

.ui-selecting
{
    background-color: #66BB22 !important;
}

JavaScript

$(document).ready(
$(function() {

    $('.want div').addClass('ui-widget-content');
    $('tr').selectable({
        filter: 'div',
        start: function(event, ui) {
            //deselect all currently selected elements on page
            $(document).find('.ui-selected').each(function() {
                $(this).removeClass('ui-selected');
            });
        },
        selected: function(event, ui) {
            //make each selected element draggable
            $(ui.selected).draggable({
                containment: 'document',
                axis: 'y',
                snap: true,
                snapMode: 'inner',
                opacity: 0.8,
                drag: function(e, ui) {
                    $('.ui-selected').css({ //TODO: Make this ONLY select '.ui-selected' within same table row
                        top: ui.position.top //brings all of the selected blocks with it
                    });
                },
                start: function() {
                    $('.ui-selected').each(function() {
                        //sets data for the original point for the blocks, in case a revert is needed
                        $(this).data('x', $(this).offset().left); //not really necessary, since blocks only move on y-axis
                        $(this).data('y', $(this).offset().top);
                    });
                },
                stop: function() {
                    $('.ui-selected').each(function() {
                        var drop = document.elementFromPoint($(this).offset().left, $(this).offset().top); //TODO: This needs to get the element being hovered over, not the element being dragged around
                        if ($(this).hasClass('confirmed') && $(this).offset().left == $(this).data('x')) //TODO: true when 'drop' is empty/required && the draggable element isn't moving along the x-axis
                        {
                            //TODO: append $(this) to drop
                        } else {
         ...