Sorting Between Tables

Using the sortable jQuery UI widget to move rows in between tables.

HTML

<div>
    <h1 class="ui-widget">Customers</h1>
    <table id="table1" class="ui-widget">
        <thead>
            <th>Login</th>
            <th>First Name</th>
            <th>Last Name</th>
        </thead>
        <tbody>
            <tr><td>Data 1</td><td>Data 1</td><td>Data 1</td></tr>
            <tr><td>Data 2</td><td>Data 2</td><td>Data 2</td></tr>
            <tr><td>Data 3</td><td>Data 3</td><td>Data 3</td></tr>
        </tbody>
    </table>
</div>
<div>
    <h1 class="ui-widget">Administrators</h1>
    <table id="table1" class="ui-widget">
        <thead>
            <th>Login</th>
            <th>First Name</th>
            <th>Last Name</th>
        </thead>
        <tbody>
            <tr><td>Data 4</td><td>Data 4</td><td>Data 4</td></tr>
            <tr><td>Data 5</td><td>Data 5</td><td>Data 5</td></tr>
            <tr><td>Data 6</td><td>Data 6</td><td>Data 6</td></tr>
        </tbody>
    </table>
</div>

CSS

body {
    font-size: 0.8em;   
}

div {
    width: 35%;
    float: left;
    margin: 1em;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    padding: 0.2em 0.4em;
    cursor: move;
}

JavaScript

// Format the table headers and table rows using classes
// from the CSS framework.
$( "td" ).addClass( "ui-widget-content" );
$( "th" ).addClass( "ui-widget-header" );

// Create the first sortable, connecting it to the second
// sortable.

// Create the second sortable, connecting it to the first
// sortable.
$( "table:last tbody" ).sortable({
    connectWith: "table:first tbody"
});