jquery - TR を別のテーブルにドラッグするときに、動的 HTML テーブルから TR のコンテンツを取得するにはどうすればよいですか

Question

HTMLでさまざまな動的テーブルを作成するDjangoでWebサイトを作成しています。メニューから、目的のテーブルをクリックして再表示します。テーブルの行をドラッグ可能にしたので、たとえば 4 つのテーブルを再表示すると、最初のテーブルから行をドラッグして、必要なテーブルにドロップできます。問題は、ドラッグした行の内容を取得できないことです。データベースに送信して変更されたテーブルの内容を変更するために、それを取得したいと思います。

ここにいくつかのコーディングがあります：

<div class="navmenu">
  <ul class="nav myulclass" id="my-tabs">
  {% for sub, values in data.items %}
    <li onClick="javascript:showonlyone('{{ sub }}');">{{ sub }}</li>
  {% endfor %}
  </ul>
</div>

<div class="tabbable">
  {% for sub, values in data.items  %}
  <div class="rasptable" id="{{ sub }}">
    <table class="formatRasp">
      <thead>
        <tr>
          <th>Hostname</th>
          <th>IP Address</th>
        </tr>
      </thead>
      <tbody class="connectedSortable">
      {% for rpi in values %}
        <tr>
          <td id="{{ rpi.get_serial }}">{{ rpi.get_serial }}</td>
          <td>{{ rpi.get_ip_address  }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $tabs = $(".tabbable");
        $("tbody.connectedSortable").sortable({
            connectWith: ".connectedSortable",
            start: function(){
                $tabs.addClass('dragging')
            },
            stop: function(){
                $tabs.removeClass('dragging');
                alert('dropped item: ')
            },
        }).disableSelection();
    });
</script>
</body>