JSFiddle - React, Tailwind, and code Playground

by fosterz

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<div>
    <table class="table display" id="tbl-drag" style="z-index:1px">
    <thead >
            <tr>
                  <th>Title</th>
                  <th>Com</th>
                  <th>Net</th>
                <th>Idiots</th>
            </tr>
      </thead>
    <tbody>
<tr class="ui-widget-content">
    <td>4562</td>
    <td>parse</td>
    <td>war</td>
    <td>mhatre</td>
</tr>    
    <tr class="ui-widget-content">
    <td>4562</td>
    <td>parse</td>
    <td>war</td>
    <td>mhatre</td>
</tr>    
    <tr class="ui-widget-content">
    <td>4562</td>
    <td>parse</td>
    <td>war</td>
    <td>mhatre</td>
</tr>   
        <tr class="ui-widget-content">
    <td>4562</td>
    <td>parse</td>
    <td>war</td>
    <td>mhatre</td>
</tr>    
        <tr class="ui-widget-content">
    <td>4562</td>
    <td>parse</td>
    <td>war</td>
    <td>mhatre</td>
</tr>    
</tbody>
</table>
    </div>
    <div>
<table class="table display" id="tbl-drop"  >
    <thead >
            <tr>
                  <th>Title</th>
                  <th>Com</th>
                  <th>Net</th>
                <th>Idiots</th>
            </tr>
      </thead>
    <tbody>
        <tr id="tr-watermark">
            <td id="td-watermark">idiots</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="tr-rep-parent-watermark">
            <td></td>
            <td colspan="3">
                <table id="tbl-rep-drop">
                  <thead >
                    <tr>
                          <th>Title</th>
                          <th>Com</th>
                          <th>Net</th>
                       ...

JavaScript

$('table').DataTable({paging: false,searching: false,
    ordering:  false,info:false});
var c = {};

$("#tbl-drag tr").draggable({
            helper: "clone",
            start: function(event, ui) {
                c.tr = this;
                c.helper = ui.helper;
            }});

$("#tbl-drop tr").droppable({
        drop: function(event, ui) {
            var tr = ui.draggable;    
            tr.insertBefore($('#tr-watermark'))

            //$(c.tr).remove();
            //$(c.helper).remove();
        }
    });
$("#tbl-rep-drop tr").droppable({
        drop: function(event, ui) {
            var tr = ui.draggable;            
            tr.insertBefore($('#tr-rep-watermark'))

            //$(c.tr).remove();
            //$(c.helper).remove();
        }
    });