JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Table 1</h1>

<table id="Table1">
    <tr>
        <td>Row 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
    </tr>
    <tr>
        <td>Row 3</td>
    </tr>
    <tr class='disabled'>
        <td>Row 4</td>
    </tr>
    <tr>
        <td>Row 5</td>
    </tr>
</table>

<h2>Table 2</h2>

<table id="Table2">
    <tr>
        <td>Row 6</td>
    </tr>
    <tr>
        <td>Row 7</td>
    </tr>
    <tr>
        <td>Row 8</td>
    </tr>
    <tr class='disabled'>
        <td>Row 9</td>
    </tr>
    <tr>
        <td>Row 10</td>
    </tr>
</table>

<h2>Table 3</h2>

<table id="Table3">
    <tr>
        <td>Row 11</td>
    </tr>
    <tr>
        <td>Row 12</td>
    </tr>
    <tr>
        <td>Row 13</td>
    </tr>
    <tr class='disabled'>
        <td>Row 14</td>
    </tr>
    <tr>
        <td>Row 15</td>
    </tr>
</table>

CSS

table {
    width:200px;
    border: brown 1px solid;
    padding:5px;
}
table tr {
    background-color:#FCF6CF;
}
table tr:hover:not(.disabled) {
    background-color:#ECF1EF;
}
body {
    cursor:default;
}
tr:not(.disabled) {
    cursor:pointer;
}
tr.disabled {
    background-color:#FEE0C6;
    cursor:not-allowed;
}

JavaScript

$(function () {
        var sourceElement;
        $("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({
            helper: 'clone',
            revert: 'invalid',
            start: function (event, ui) {
                $(this).css('opacity', '.5');
                sourceElement = $(this).closest('table').attr('id');
            },
            stop: function (event, ui) {
                $(this).css('opacity', '1');
            }
        });
    
        $("#Table1, #Table2, #Table3").droppable({
            drop: function (event, ui) {
                $(ui.draggable).appendTo(this);
                alert($(ui.draggable).text() +
                    ' was draged from ' + sourceElement + ' to ' + $(this).attr('id') + '.');
    
            }
        });
    
    });