如何更新拖放列表中的值？

Question

以下是通过数据库查找生成的列表的屏幕截图：

如您所见，该列表只是每个玩家在其位置上的排名。

我希望能够拖放每个框来切换列表中的玩家位置。在网上学习了一些教程后，我可以这样做了。见下图：

但是，我遇到但未能解决的问题是，当我在列表中上下移动玩家时，我也需要更新位置排名（第一列）；正如你所看到的，例如，Patrick Mahomes 最初是第 3 名，但是当我将他移到第 1 名时，该列没有更新。

有什么帮助或建议吗？先感谢您。我到目前为止的代码：

    <script>
document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;
  
  function handleDragStart(e) {
    this.style.opacity = '0.4';
    
    dragSrcEl = this;

    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';
    
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }
    
    if (dragSrcEl != this) {
      dragSrcEl.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');
    }
    
    return false;
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';
    
    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }
  
  
  let items = document.querySelectorAll('.playercontainer .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });
});

</script>

生成列表的 HTML：

<table class="table table-hover playercontainer">
    <tr>
        <th>Pos. Rank</th>
        <th>Name</th>
        <th>Position</th>
    </tr>
    <tbody class="row_position">
    {foreach $players as $player}
        <tr draggable="true" class="box">
            <td id="{$player.pos_rank}"><strong>{$player.pos_rank}</strong></td>
            <td><input type="text" name="name" value="{$player.player}" readonly></td>
            <td>{$player.pos}</td>
        </tr>
    {/foreach}
    </tbody>
</table>

Answer 1

我需要查看您的 HTML，但是：

 let items = document.querySelectorAll('.playercontainer .box');

可能需要将其更改为只是

 let items = document.querySelectorAll('.playercontainer');

似乎玩家名称的内部 HTML 中的任何 div 都需要是唯一可以拖动的东西，而数字所在的可能标签不需要添加到它们的 add eventListener。