JSFiddle - React, Tailwind, and code Playground

by piyush saraf

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="table1" class="bitacoratable">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>ClassName</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>1</td>
                    <td>Class 1</td>
                </tr>
                <tr class="childrow">
                    <td collspan = "2" >
                        <table class="childgrid">
                                <tr class="draggable_tr">
                                    <td>1</td>
                                    <td>Student 1</td>                                             
                                </tr>
                                <tr class="draggable_tr">
                                    <td>2</td>
                                    <td>Student 2</td>                                                                              
                                </tr>       
                                <tr class="draggable_tr">
                                    <td>3</td>
                                    <td>Student 3</td>                                                                              
                                </tr>  
                                <tr class="draggable_tr">
                                    <td>4</td>
                                    <td>Student 4</td>                                                                              
                                </tr>  
                                <tr class="draggable_tr">
                                    <td>5</td>
                                    <td>Student 5</td>                                                                              
                                </tr> ...

CSS

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
        .bitacoratable {
            height: 400px;
            overflow-y: auto;
            width: 220px;
            float:left;
        }
        #table1 {
            margin-right: 100px;
        }
        .childgrid tr { cursor: pointer; }
        .selectedRow, .selectedRow:active, .childgrid tr:active {
            background-color: #E7E7E7;
            cursor: move;
        }

JavaScript

$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
      helper: function(){
          var selected = $('.childgrid tr.selectedRow');
        if (selected.length === 0) {
          selected = $(this).addClass('selectedRow');
        }
        var container = $('<div/>').attr('id', 'draggingContainer');
    container.append(selected.clone().removeClass("selectedRow"));
    return container;
      }
 });

$("#table1 .childgrid, #table2 .childgrid").droppable({
    drop: function (event, ui) {
    $(this).append(ui.helper.children());
    $('.selectedRow').remove();
    }
});

$(document).on("click", ".childgrid tr", function () {
    $(this).toggleClass("selectedRow");
});