Sortable Table with Mobile

Sortable table rows using jQuery UI

by TheFiddler

HTML

<script src="http://dbushell.github.com/Nestable/jquery.nestable.js"></script>
<table border="1" class="sortable">
    <thead>
        <tr>
            <td></td>
            <td>Row One Column One</td>
            <td>Row Two Column One</td>
            <td>Row Three Column One</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C1</td>
            <td>R2 C1</td>
            <td>R3 C1</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C2</td>
            <td>R2 C2</td>
            <td>R3 C2</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C3</td>
            <td>R2 C3</td>
            <td>R3 C3</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C4</td>
            <td>R2 C4</td>
            <td>R3 C4</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C5</td>
            <td>R2 C5</td>
            <td>R3 C5</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C6</td>
            <td>R2 C6</td>
            <td>R3 C6</td>
        </tr>
        <tr>
            <td class="sortme">...</td>
            <td>R1 C7</td>
            <td>R2 C7</td>
            <td>R3 C7</td>
        </tr>
    </tbody>
</table>

CSS

body {
    padding:20px;
    font-family:sans-serif;
}

td {
    padding:7px;
}
tr:nth-child(2n-1) {
    background:#fff;
}
tr:nth-child(2n) {
    background:#f1f1f1;
}
.highlight {
    background:red;
}
.placeholder {
    padding-top:5px;
    height:25px;
    margin:2px;
    width:100%;
    background:#eaeaea;
    border:2px dashed #ccc;
    border-radius:3px;
    text-align:center;
    color:#ccc;
}
.sortme {
    background:#ccc;
}

JavaScript

// fix to prevent rows from collapsing while dragging
var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
};

// initialize sortable
$(".sortable tbody").sortable({
    helper: fixHelperModified,
    handle: 'td:first',
    placeholder: {
        element: function(currentItem) {
            return $("<div class='placeholder'>+</div>")[0];
        },
        update: function(container, p) {
            return;
        }
    }
});