jQuery UI Sortable - how to include/exclude multiple "items"?

Question

I have a working example of the jQuery UI Sortable function. I'm applying it to a HTML table to drag and drop and sort table rows. It works great except I want to exclude certain classes of row from being sortable. Using the items parameter, I can successfully exclude ONE class (the "list-button-bar" class), but I can't for the life of me figure out the syntax for how to exclude more than one class. For example, I want to exclude <th> and other classes of <tr>.

This is probably one of those ones that is in the documentation but I'm not familiar enough yet with jQuery UI to know even what to search for.

Here's the working code:

<script>
    $(function() {
      $("#applications_list tbody.list-tbody").sortable({
        items: "tr:not(.list-button-bar)",
        cursor: 'crosshair'
      });
      $("#applications_list tbody.list-tbody").disableSelection();

    });
</script>

Andrew Whitaker · Accepted Answer · 2011-05-13 21:20:29Z

14

Have you tried using a comma? The items option takes a jQuery selector:

  $("#applications_list tbody.list-tbody").sortable({
    items: "tr:not(.list-button-bar), :not(th)", // Excludes <tr>s without a class and <th>s
    cursor: 'crosshair'
  });

answered May 13, 2011 at 21:20

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

2 Comments

TrojanName Over a year ago

Thanks. "jQuery selector" - that was the magic keyword I needed! Once I knew what I was looking for it was easy to find. This doc explains it pretty well (actually it explains it much better than the newer version of the same doc, which is totally unfriendly to a newbie) docs.jquery.com/DOM/Traversing/Selectors In the end, I discovered it was easier just to include the <tr>'s I wanted using items: "tr:.even, .odd", One thing that completely was the unfortunate coincidence that my form has classes called "even" and "odd", which are selector keywords. Adding the dot in front solved that.

Andrew Whitaker Over a year ago

@Brian: Ah, ok. Well I'm glad I could help :)

A_Flama · Accepted Answer · 2012-02-07 16:20:48Z

2

To exclude multiple classes of tr use:

$("#applications_list tbody.list-tbody").sortable({
        items: "tr:not(.list-button-bar,.other-class1,.other-class2)",
        cursor: 'crosshair'
});

answered Feb 7, 2012 at 16:20

A_Flama

211 bronze badge

Comments

DarthJDG · Accepted Answer · 2011-06-21 12:52:40Z

1

In Jquery UI 1.8 use the following:

$("#applications_list tbody.list-tbody").sortable({
    // Excludes <tr>s without a class and <th>s
    filter: "tr:not(.list-button-bar), :not(th)"
});

edited Jun 21, 2011 at 12:52

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

answered Jun 20, 2011 at 21:34

Carlos Bendfeldt

111 bronze badge

Collectives™ on Stack Overflow

jQuery UI Sortable - how to include/exclude multiple "items"?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related