Jquery sortable not sorting 2 items, one of which is set not draggable-CodePudding

I got a table with 2 rows:

<table id='table'>
     <tr ><td>row 1</td></tr>
     <tr ><td>row 2</td></tr>
</table>

I enable sorting like this:

  $('#table').sortable( {
      items: 'tr:not(.no-drag)',
      handle: 'td',
      cursor: 'pointer',
      cancel: '.no-drag',
      axis: 'y'
  });

Even if there is just one draggable item, i still want to move it as the first or last item. The row visually moves, but on drop is not moved before or after the other row (which is marked as 'no-drag').

How to fix this?

CodePudding user response：

As discussed here: https://jqueryui.com/sortable/#items you will just want to use cancel option.

$(function() {
  $('#table').sortable({
    items: '> tbody > tr',
    handle: 'td',
    cursor: 'pointer',
    cancel: '.no-drag',
    axis: 'y'
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<table id='table'>
  <tr >
    <td>row 1</td>
  </tr>
  <tr >
    <td>row 2</td>
  </tr>
</table>