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.

score 8 · Answer 1 · edited May 23 '17 at 12:00

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.

The demo you linked to does not use tables, it uses lists and divs — slashdottir, Feb 16 '14 at 14:34
You could always switch the list items for the table rows and work in the same fashion. I'll keep an eye out for other methods and keep you posted if I find another approach. — WindsofTime, Feb 16 '14 at 14:38
I've tried that - it doesn't work for me. Here's a broken fiddle: http://jsfiddle.net/slashdottir/64YRj/ — slashdottir, Feb 16 '14 at 15:06
I edited my answer with a working solution. Let me know if you find any bugs and I'll look into them. :) — WindsofTime, Feb 16 '14 at 18:05
You did it, his demo works. While you're on a roll, could you answer my very similar question? http://stackoverflow.com/questions/21807377/jquery-how-to-drag-multiple-rows-from-one-table-to-another — slashdottir, Feb 16 '14 at 21:09

Drag and drop multiple rows from one table to another table

1 Answers1

Linked