jQuery UI sortable with fixed rows

Question

I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).

The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.

Here is the relevant code:

<script type="text/javascript">
    $(function () {
    $("#response_options tbody.content").sortable();
    $("#response_options tbody.content").disableSelection();
});
</script>

<table id="response_options" class="data-table">
    <tbody class="content">
        <tr>
            <th>Links</th><th>Response</th>
        </tr>
        <tr class="sortable-row">
           <td>Edit</td>
           <td>Item 1</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 2</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 3</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 4</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 5</td>
        </tr>
        <tr>
            <td>Edit</td>
            <td>Item 1</td>
        </tr>
    </tbody>
</table>

The selector goes inside .sortable(...):

$("#response_options tbody.content").sortable();

as

$("#response_options tbody.content").sortable( items: ??? );

and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.

Xnake · Accepted Answer · 2011-05-14 04:10:36Z

11

This should work:

$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});

answered May 14, 2011 at 4:10

Xnake

9407 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dieter Gribnitz · Accepted Answer · 2013-03-13 11:05:40Z

8

This worked for me:

        jQuery(".sortable tbody").sortable({
            items: 'tr:not(:first)'
        });

answered Mar 13, 2013 at 11:05

Dieter Gribnitz

5,2292 gold badges44 silver badges38 bronze badges

Comments

Allan Pereira · Accepted Answer · 2016-07-12 15:20:12Z

4

For this markup:

<table id="tableid">
    <thead>
        <tr>    
            <th>namr</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jagadeesh</td>
            <td>1</td>
        </tr>
        <tr>
            <td>jagadeesh</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Use this jQuery:

$('#tableid tbody').sortable();

It will move only body content of table you cannot move header part.

edited Jul 12, 2016 at 15:20

Allan Pereira

2,5704 gold badges23 silver badges28 bronze badges

answered Jun 22, 2011 at 5:03

jagadeesh

411 bronze badge

Collectives™ on Stack Overflow

jQuery UI sortable with fixed rows

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related