How do I append a Sortable row to a table in another tab using jQuery UI?

Question

I have a page with jquery-ui tabs and each tab contains a table. I have set tabs to be droppable and the tables to be sortable.

I would like to be able to drag a row from the table inside active tab, drop it on a different tab and have the row appended to the table contained in that tab.

Here is my JS:

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr:not(:first)",
    appendTo: "parent",
    helper: "clone"
    }).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function(e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table tr:last").after(ui.draggable);
        ui.draggable.remove();
    }
});

As you can see in this JSFiddle, the rows are draggable, but dropping them on another tab does not append it to the table inside it.

The problem seems to be my attempt to use the ui.draggable jquery element to append after the tab's table's last row in the line:

$(tabdiv + " table tr:last").after(ui.draggable);

Instead if I build the row myself with <tr> tags and use ui.draggable's html as follows:

$(tabdiv + " table tr:last").after("<tr>" + ui.draggable.html() + "</tr>");

then it works as expected as shown in this forked JSFiddle.

The problem with doing it this way is that I lose any class or data information that was attached to the original row.

Can anyone set me straight as to how to append the row element that was dragged? (BTW, I am kind of a newbie at jquery, so my apologies if this turns out to be something elementary.)

Answer 1

You can use the clone() method to append a clone of the current element, including the data and event handlers as follows:

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr:not(:first)",
    appendTo: "parent",
    helper: "clone"
}).disableSelection();

$("#tabs ul li a").droppable({
    hoverClass: "drophover",
    tolerance: "pointer",
    drop: function (e, ui) {
        var tabdiv = $(this).attr("href");
        $(tabdiv + " table").append(ui.draggable.clone(true).show());
        ui.draggable.remove();
    }
});

table {
    border-collapse:collapse;
}
table tr td {
    border: 1px solid red;
    padding:2px 15px 2px 15px;
    width:50px;
}
#tabs ul li.drophover {
    color:green;
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div id="tabs">
    <ul>
        <li><a href="#current"><span>Current</span></a>

        </li>
        <li><a href="#archive"><span>Archive</span></a>

        </li>
        <li><a href="#future"><span>Future</span></a>

        </li>
    </ul>
    <div id="current">
        <div id="table1">
            <table>
                <tbody>
                    <tr>
                        <td>COL0</td>
                        <td>COL1</td>
                        <td>COL2</td>
                    </tr>
                    <tr>
                        <td>c00</td>
                        <td>c01</td>
                        <td>c02</td>
                    </tr>
                    <tr>
                        <td>c10</td>
                        <td>c11</td>
                        <td>c12</td>
                    </tr>
                    <tr>
                        <td>c20</td>
                        <td>c21</td>
                        <td>c22</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="archive">
        <div id="table2">
            <table>
                <tbody>
                    <tr>
                        <td>COL0</td>
                        <td>COL1</td>
                        <td>COL2</td>
                    </tr>
                    <tr>
                        <td>a00</td>
                        <td>a01</td>
                        <td>a02</td>
                    </tr>
                    <tr>
                        <td>a10</td>
                        <td>a11</td>
                        <td>a12</td>
                    </tr>
                    <tr>
                        <td>a20</td>
                        <td>a21</td>
                        <td>a22</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="future">
        <div id="table3">
            <table>
                <tbody>
                    <tr>
                        <td>COL0</td>
                        <td>COL1</td>
                        <td>COL2</td>
                    </tr>
                    <tr>
                        <td>f00</td>
                        <td>f01</td>
                        <td>f02</td>
                    </tr>
                    <tr>
                        <td>f10</td>
                        <td>f11</td>
                        <td>f12</td>
                    </tr>
                    <tr>
                        <td>f20</td>
                        <td>f21</td>
                        <td>f22</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>