Перетаскивание нескольких таблиц

Question

У меня несколько таблиц ... Перетаскивание строк (внутри таблицы) работает нормально.Но как я могу отсортировать таблицы самостоятельно?Мне нужно и то, и другое: сортировка строк внутри таблицы и сама сортировка таблиц.

<table class="sortable-table table table-bordered">
  <thead class="thead-light">
    <tr>
      <th scope="col">FOO</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TABLE 1 ROW 1</td>
    </tr>
    <tr>
      <td>TABLE 1 ROW 2</td>
    </tr>
  </tbody>
</table>

<table class="sortable-table table table-bordered">
  <thead class="thead-light">
    <tr>
      <th scope="col">FOO2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>TABLE 2 ROW 1</td>
    </tr>
    <tr>
      <td>TABLE 2 ROW 2</td>
    </tr>
  </tbody>
</table>

// works fine
$( "table tbody" ).sortable({});
// ?
$( ".sortable-table" ).sortable({});

Answer 1

Я нашел решение: я добавил класс-оболочку

<div class="wrapper">
    <table class="sortable-table table table-bordered">
    ...

$ (".wrapper") .sortable ({})

Answer 2

Если $( "table tbody" ).sortable({}); работает нормально, попробуйте следующее:

$( ".sortable-table tbody" ).sortable({}); // table
$( ".sortable-table tbody tr" ).sortable({}); // table row

РЕДАКТИРОВАТЬ:

Возможно, вы захотите обернуть ваш HTML в оболочку.Вы можете сделать это следующим образом:

<div class="wrapper">
  <table class="sortable-table table table-bordered">
  ...
  </table>
  <table class="sortable-table table table-bordered">
  ...
  </table>
</div>

Теперь вы можете сортировать таблицы и строки следующим образом:

$( ".wrapper" ).sortable( {})
$( ".sortable-table tbody tr" ).sortable({});

Подробнее о селекторах здесь:

https://www.w3schools.com/jquery/jquery_selectors.asp

https://johnny.github.io/jquery-sortable/

Вы можете выбрать дочерние элементы в jQuery, как и CSS, используя space