Drag and drop multiple rows from one table to another table

Question

I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.

I have done the sample to drag and drop single row from on table to another. Find the below code:

html:

<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>                              
                        </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>
        <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">
                                    <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>
                        <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>

Script:

$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
      helper: 'clone',
      revert: 'invalid',
      start: function (event, ui) {
          $(this).css('opacity', '.5');
             },
      stop: function (event, ui) {
          $(this).css('opacity', '1');
       }
 });

$("#table1 .childgrid, #table2 .childgrid").droppable({
    drop: function (event, ui) {
    $(ui.draggable).appendTo(this);
    }
});

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

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;
        }
        .selectedRow {
            background-color: #E7E7E7;
            cursor: move;
        }

How to do it for mutilple rows?

Regards, Karthik.

Answer 1

You could use draggable's helper function. There's a nice implementation here.

Here's how it looks using the above as a guideline for your particular code:

JsFiddle Demonstration:

Explanation of what's going on:

(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.

(selected.length === 0) {
      selected = $(this).addClass('selectedRow');
}

(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.

var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;

(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.

(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.

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

$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.

    $('.selectedRow').remove();
    }

Now to get rid of those table rows that we selected earlier.

});

Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.