JSFiddle - React, Tailwind, and code Playground

HTML

<p>Drag row have id 1 and drop anywhere</p>
  <br>
<table>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>city</th>
    </tr>
      <tr class="person">
        <td>1</td>
        <td>abc</td>
        <td>abc</td>
    </tr>
      <tr class="person">
       <td>2</td>
        <td>xyz</td>
        <td>xyz</td>
    </tr>
</table>

CSS

table{
    border-collapse : collapse;
}

td, th{
    border : 1px solid #000;
    padding : 5px 20px;
}

th{
    background-color : #f3f3f3;
}

.drag {
    background-color : #f3f3f3;
    height : 20px;
    width : 100px;
}

JavaScript

$('.person').draggable({
    helper : function(){
        return $('<div class="drag">Drag me</div>')
    },
    cursor : 'crosshair',
    cursorAt : {left : 50},
    start : function(){
        $(this).hide();
    },
    stop : function(){
          $(this).show();
    }
});