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

$("#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');
             },
      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 ' +
              'XX' + ' to ' +
              $(this).attr('id') + '.');
        
     }
 });