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

TrojanName picture TrojanName · May 13, 2011 · Viewed 13.2k times · Source

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>

Answer

Andrew Whitaker picture Andrew Whitaker · May 13, 2011

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