multirow drag between tables that works

by J. Jones

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 1
  <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>
            </table>
          </td>
        </tr>
        <tr> <td>2</td> <td>Class 2</td> </tr>
        <tr class="childrow">
          <td collspan = "2">
            <table class="childgrid">
                <tr class="draggable_tr"> <td>6</td> <td>Student 6</td></tr>
                <tr class="draggable_tr"> <td>7</td> <td>Student 7</td></tr>
                <tr class="draggable_tr"> <td>8</td> <td>Student 8</td></tr>
                <tr class="draggable_tr"> <td>9</td> <td>Student 9</td></tr>
                <tr class="draggable_tr"> <td>10</td> <td>Student 10</td></tr>
            </table>
          </td>
        </tr>
    </tbody>
  </table>
</div>

<div id="table2" class="bitacoratable">
    Table 2
  <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>
            <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">...

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: #00EEE7;
  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");
});