JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class='table'>
    <tr>
        <td>drag1</td>
        <td>drag2</td>
    </tr>
     <tr>
        <td>drag3</td>
        <td>drag4</td>
    </tr>
</table>
<br/>
<table class='table'>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS

td {
    width: 100px;
    border: 1px solid black;
}

table, div {
    border: 1px solid black;
}

.hover {
    background-color: Red;
}

JavaScript

$(function() {

   obj = $('.table td');
   dragObj = $('.table:eq(1) td');
   $(obj).draggable({
       cursor:'pointer',
       snap:$('td span'),
       revert: 'invalid'      
   })

   $(dragObj).droppable({
       accept : obj,
       drop: function(event,ui){
           var target = $(event.target), //dragged cell
           drag = $(ui.draggable),       //old cell
           targetText = "",
           dragText ="",
           duration =0;

           if(target.text().trim() === ""){
               targetText = target.text().trim();
               dragText = drag.text().trim();
               target.html(dragText);
               //drag.html('&nbsp;');  uncommon this will remove the  dragged cell texts from table 1.
           }
           else{
               duration = 300;
           }
           ui.draggable.draggable('option', 'revertDuration', duration);
           ui.draggable.draggable('option','revert', true);
       }
   })
})