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>

score 14 · Accepted Answer · answered May 13 '11 at 21:20

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 '11 at 21:20

Andrew Whitaker

124,656
32
289
307

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) http://docs.jquery.com/DOM/Traversing/Selectors In the end, I discovered it was easier just to include the '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. – TrojanName May 16 '11 at 08:09
@Brian: Ah, ok. Well I'm glad I could help :) – Andrew Whitaker May 16 '11 at 19:38

score 2 · Answer 2 · answered Feb 07 '12 at 16:20

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 07 '12 at 16:20

A_Flama

21
1

score 1 · Answer 3 · edited Jun 21 '11 at 12:52

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 '11 at 12:52

DarthJDG

16,511
11
49
56

answered Jun 20 '11 at 21:34

Carlos Bendfeldt

11
1

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

3 Answers3