检测可排序项目来自的表

Question

我有两个表格，可以在表格之间拖放项目，也可以在同一个表格内拖放项目。我想检测该项目来自的表。

仅当项目来自其他表时才会触发接收事件。我还需要检测项目何时“仅”来自同一张桌子。有任何想法吗？请参阅演示

$("#peopleTable1 tbody").sortable({
  connectWith: "#peopleTable2 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  stop: function(e, ui) {},
  receive: function(e, ui) {
    console.log("Users2 -- Users1")
  },
  axis: "xy",
});

$("#peopleTable2 tbody").sortable({
  connectWith: "#peopleTable1 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  update: function(e, ui) {

  },
  receive: function(e, ui) {
    console.log("Users1 -- Users2")
  },
  axis: "xy",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="peopleTable1">
  <thead class="thead-acu">
    <tr>
      <th class="col-30p">Name</th>
      <th class="col-35p">Age</th>
      <th class="col">Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>13</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>David</td>
      <td>20</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>Martha</td>
      <td>40</td>
      <td>Girl</td>
    </tr>
  </tbody>
</table>

<table id="peopleTable2">
  <thead class="thead-acu">
    <tr>
      <th class="col-30p">Name</th>
      <th class="col-35p">Age</th>
      <th class="col">Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>7</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>Laura</td>
      <td>27</td>
      <td>Girl</td>
    </tr>
    <tr>
      <td>ELisabeth</td>
      <td>73</td>
      <td>Girl</td>
    </tr>
  </tbody>
</table>

Answer 1

sort

事件：

工作片段：

$("#peopleTable1 tbody").sortable({
  connectWith: "#peopleTable2 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  stop: function(e, ui) {},
  receive: function(e, ui) {
    console.log("Users2 -- Users1")
  },
  axis: "xy",
});

$("#peopleTable2 tbody").sortable({
  connectWith: "#peopleTable1 tbody",
  helper: function(e, tr) {
    const $originals = tr.children();
    const $helper = tr.clone();
    $helper.children().each(function(index) {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },
  start: function(e, ui) {},
  update: function(e, ui) {

  },
  receive: function(e, ui) {
    console.log(ui.sender.closest('table')[0].id);
  },
  sort: function( event, ui ) {
    console.log(ui.item.closest('table')[0].id)
  },
  axis: "xy",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="peopleTable1">
  <thead class="thead-acu">
    <tr>
      <th class="col-30p">Name</th>
      <th class="col-35p">Age</th>
      <th class="col">Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>13</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>David</td>
      <td>20</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>Martha</td>
      <td>40</td>
      <td>Girl</td>
    </tr>
  </tbody>
</table>

<table id="peopleTable2">
  <thead class="thead-acu">
    <tr>
      <th class="col-30p">Name</th>
      <th class="col-35p">Age</th>
      <th class="col">Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>7</td>
      <td>Boy</td>
    </tr>
    <tr>
      <td>Laura</td>
      <td>27</td>
      <td>Girl</td>
    </tr>
    <tr>
      <td>ELisabeth</td>
      <td>73</td>
      <td>Girl</td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>