How to drag and drop elements between two container

Question

I have got two tables by name Table 1 and Table2 and each table consists of two rows.

I could able to drag and drop elements within the same table

Could you please tell me If is it possible to drag and drop Table rows from Table 1 to Table 2 and vice versa (Moving rows within different tables )

This is my HTML for the two tables

<h2>Table 1:</h2>
        <div id="table1" >
            <table>
                <tbody>
                    <tr>
                        <td>Table 1 First Row</td>
                    </tr>
                    <tr>
                        <td>Table 1 Second Row</td>
                    </tr>
                </tbody>
            </table>
        </div>
 <hr/>
    <h2>Table 2:</h2>
   <div id="table2">
            <table>
                <tbody>
                    <tr>
                        <td>Table 2 First Row</td>
                    </tr>
                    <tr>
                        <td>Table 2 Second Row</td>
                    </tr>
                </tbody>
            </table>
        </div>

and my js code

$("tbody").sortable({

});

This is my fiddle

https://jsfiddle.net/wdy1ty89/7/

Possible duplicate of [Drag and drop multiple rows from one table to another table](http://stackoverflow.com/questions/20279419/drag-and-drop-multiple-rows-from-one-table-to-another-table) — Manish, Sep 13 '16 at 10:44
@UnKnown check it: http://stackoverflow.com/a/39468056/1076753 — Vixed, Sep 13 '16 at 11:23

Vixed · Accepted Answer · 2016-09-13T11:18:44.200

3

From jQuery UI:

$("tbody").sortable({connectWith:"tbody"});

You should apply a min-width and height where the user can drag the element:

table{
  padding:5px 0; // To have a min height of 10px
  min-width:100px;
}

Check this Fiddle

edited Sep 13 '16 at 11:18

answered Sep 13 '16 at 10:41

Vixed

3,429
5
37
68

Thanks a lot , but why the functionality is not working once i move all the elements from table 1 Or Table 2 https://jsfiddle.net/wdy1ty89/8/ – Pawan Sep 13 '16 at 10:44
because you lost your tbody height after you move all your **tr** – Vixed Sep 13 '16 at 10:45
no problem , i have seen this fiddle too http://jsfiddle.net/terryyounghk/Bs2jV/ but its of same table – Pawan Sep 13 '16 at 10:55
Thanks a lot , i was actually struggling to do this – Pawan Sep 13 '16 at 11:46

How to drag and drop elements between two container

1 Answers1