JSFiddle - React, Tailwind, and code Playground

by Sethu raman

HTML

Table1
<table border="1" cellpadding="0">
    <thead>
         <td class="hiddenTD">Demo Name</td>
        <td class="hiddenTD">Demo Description</td>
        <td>Picture</td>
    </thead>
    <tr class="drag">
        <td class="hiddenTD">Demo1</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo Picture"/></td>
    </tr>
     <tr class="drag">
        <td class="hiddenTD">Demo2</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo2 Picture"/></td>
    </tr>
     <tr class="drag">
        <td class="hiddenTD">Demo3</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo3 Picture"/></td>
    </tr>
</table>
<br/>
Table2
<table id="droppable" border="1" cellpadding="0">
        <thead>
         <td>Demo Name</td>
        <td >Demo Description</td>
        <td>Picture</td>
    </thead>

</table>

CSS

.hiddenTD
{
    display:none;
}

thead td{
    background-color:red;
}
}

JavaScript

$( ".drag" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
    var $tr=$('<tr/>');
    $tr.html(ui.draggable.html());
    $tr.find('td').removeClass('hiddenTD');
    $(this).append($tr);
}
});