为什么我的 jqueryui sortable table 不起作用?

Why don't my jqueryui sortable table work?

我不明白为什么我无法对 table 行进行排序。我的 sortable 可以很好地处理列表,但是我的 table 出了点问题。 这是我的 table:

<table class="table table-sm" id="tilbehor_table"> 
  <tbody>
  <tr>
     <th>Navn</th>
     <th>Pris</th>
     <th></th>
  </tr>
  <tr id="tilline_1">
     <td>Nina nattbord Hvitmalt</td>
     <td>1195</td>
     <td>
        <button type="button" class="btn btn-outline-secondary btn-sm tilsorthandle" title="Endre rekkefølge"><span data-feather="menu"></span></button>
     </td>
  </tr>
  <tr id="tilline_2">
     <td>Odel gavl&nbsp;rutet 150 cm Skumring blå</td>
     <td>3995</td>
     <td>
        <button type="button" class="btn btn-outline-secondary btn-sm tilsorthandle"  title="Endre rekkefølge"><span data-feather="menu"></span></button>
     </td>
  </tr>
  </tbody>
  </table>

这是我的 JS:

$('#tilbehor_table tbody').sortable({ axis: "y", handle: ".tilsorthandle" });

当我 运行 js 时,我可以看到 sortable 类 被添加到 table,但我无法使用处理程序单击并拖动行。

sortable 中有一个取消选项,默认设置为 "input,textarea,button,select,option"。根据文档,cancel 选项执行以下操作。

 Prevents sorting if you start on elements matching the selector.

因此,如果使用这些默认选择器进行排序,则会阻止排序。将取消选项的值设置为空字符串即可。

   $('#tilbehor_table tbody').sortable({ axis: "y", handle: ".tilsorthandle", cancel: ''});