JSFiddle - React, Tailwind, and code Playground

Scheduling/Drag-n-Drop Prototype

by JordanForeman

HTML

<table class="requirements">
            <thead>
                <tr>
                    <td colspan="28">Requirements</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>&nbsp;</td>
                    <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>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="17" class="required">&nbsp;</td>
                    <td colspan="10">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="28">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="3">&nbsp;</td>
                    <td colspan="17" class="required">&nbsp;</td>
                    <td colspan="8">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="5">&nbsp;</td>
                    <td colspan="16" class="required">&nbsp;</td>
                    <td colspan="7">&nbsp;</td>
                </tr>
                <tr>
                    <td colspan="18">&nbsp;</td>
                    <td colspan="8" class="required">&nbsp;</td>
                    <td colspan="2">&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: 7px;
}

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

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

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

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

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

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

.availability .want .draggable
{
    background-color: GREEN;
}

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

.draggable
{
    color: #FFF;
    text-align: center;
    cursor: move;
}

.confirmed
{
    background-color: GREEN;
}

JavaScript

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

    $('.draggable').draggable({
        axis: 'y',
        snap: true,
        snapMode: 'inner',
        revert: 'invalid',
        opacity: 0.8,
    });

    $('.required').droppable({
        tolerance: 'intersect',
        drop: function(event, ui) {
            $(this).html("");
            $(this).append(ui.draggable);
            $(ui.draggable).addClass('confirmed').css({
                top: 0,
            });
        },
        out: function(event, ui) {}
    });

    $('.want').droppable({
        tolerance: 'intersect',
        accept: $(this).parent('tr').attr('class'),
        drop: function(event, ui) {
            $(this).append(ui.draggable);
            $(ui.draggable).css({
                top: 0
            });
        }
    });

    $('.available').droppable({
        tolerance: 'intersect',
        accept: $(this).parent('tr').attr('class'),
        drop: function(event, ui) {
            $(this).append(ui.draggable);
            $(ui.draggable).css({
                top: 0
            });
        }
    });
}));