CODEWITHSUNDEEP
jquery-uijquery-ui-sortableitems
TrojanName
TrojanName

Reputation: 5355

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

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>

Upvotes: 6

Views: 14268

Answers (3)

A_Flama
A_Flama

Reputation: 21

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'
});

Upvotes: 2

Carlos Bendfeldt
Carlos Bendfeldt

Reputation: 11

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)"
});

Upvotes: 1

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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'
  });

Upvotes: 14

Related Questions