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

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

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

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

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

但是，我遇到过并没有解决的问题是，当我在列表中上下移动玩家时，我需要更新位置排名（第一列）；例如，如您所见，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>

解决方法

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

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

可能需要将其更改为仅

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

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