更新显示的数字，使其与纯javascript中元素的顺序相匹配

我有代码，允许我拖放来重新排列项目，并将它们从一个容器移动到另一个容器，但我还想更新span标记内的数字，以匹配其顺序位置

例如，“Colorado”位于0位置，但当我将其拖到“犹他”之后时，我想更新“Montana”使其旁边有“0”，将“犹他”改为“1”，将“Colorado”改为“2”，但我不知道如何操作

以下是JS小提琴：

const draggables=document.queryselectoral（“.draggable”）
const containers=document.querySelectorAll（“.container”）
draggables.forEach（draggable=>{
DragTable.addEventListener（'dragstart'，（）=>{
draggable.classList.add（'draggable'）
})
draggable.addEventListener（'dragend'，（）=>{
draggable.classList.remove（'draggable'）
})
})
containers.forEach（container=>{
container.addEventListener（'dragover'，dragover）；
})
函数dragOver（e）{
e、 预防默认值（）
const afterElement=getDragAfterElement（this，e.clientY）
const draggable=document.querySelector（“.draggable”）
if（afterElement==null）{
此.appendChild（可拖动）
}否则{
此.insertBefore（可拖动，afterElement）
}
}
函数getDragAfterElement（容器，y）{
const draggableElements=[…container.queryselectoral（'.draggable:not（.draggable）]
返回draggableElements.reduce（（最近，子项）=>{
const box=child.getBoundingClientRect（）
常数偏移=y-box.top-box.height/2
if（偏移量<0&&offset>最近的.offset）{
返回{offset:offset，元素：child}
}否则{
返回最近的
}
}，{offset:Number.NEGATIVE_INFINITY}）.element
}

0
蒙大拿州1
2犹他州
蒙大拿州3
怀俄明州4


缅因州0
北卡罗来纳州
佛罗里达州
3弗吉尼亚州
4纽约

我在eventlistener中为Dragable添加了一个更新号码的调用

  draggable.addEventListener('dragend', (e) => {
    draggable.classList.remove('dragging');
    dragUpdateNr();
  })

此函数首先查看UL，并与foreach一起使用。我在这里搜索所有李的。在这些已建立的元素上，我使用一个简单的for循环，并将textContent从第一个子元素（这是带有数字的范围）设置为循环中的索引

function dragUpdateNr() {
    let uls = document.querySelectorAll('ul.container');
    
    uls.forEach(ul => {
        let lis = ul.querySelectorAll('li.draggable');
        for (let i=0; i<lis.length; i++) {
            let li = lis[i];
            li.firstChild.textContent = i;
        }
    });
}

0
蒙大拿州1
2犹他州
蒙大拿州3
怀俄明州4


缅因州0
北卡罗来纳州
佛罗里达州
3弗吉尼亚州
4纽约

您可以循环每个容器中的列表元素，并根据其索引对其重新编号：

const draggables=document.queryselectoral（“.draggable”）
const containers=document.querySelectorAll（“.container”）
draggables.forEach（draggable=>{
DragTable.addEventListener（'dragstart'，（）=>{
draggable.classList.add（'draggable'）
})
draggable.addEventListener（'dragend'，（）=>{
draggable.classList.remove（'draggable'）
})
})
containers.forEach（container=>{
container.addEventListener（'dragover'，dragover）；
})
函数dragOver（e）{
e、 预防默认值（）
const afterElement=getDragAfterElement（this，e.clientY）
const draggable=document.querySelector（“.draggable”）
if（afterElement==null）{
此.appendChild（可拖动）
}否则{
此.insertBefore（可拖动，afterElement）
}
document.querySelectorAll（'.container'）.forEach（c=>{
c、 querySelectorAll（'li.draggable'）.forEach（（r，i）=>{
r、 querySelector（'span'）。innerHTML=i
})
})
}
函数getDragAfterElement（容器，y）{
const draggableElements=[…container.queryselectoral（'.draggable:not（.draggable）]
返回draggableElements.reduce（（最近，子项）=>{
const box=child.getBoundingClientRect（）
常数偏移=y-box.top-box.height/2
if（偏移量<0&&offset>最近的.offset）{
返回{
抵销：抵销，
元素：child
}
}否则{
返回最近的
}
}, {
偏移量：数字负无穷大
}).元素
}

0
蒙大拿州1
2犹他州
蒙大拿州3
怀俄明州4


缅因州0
北卡罗来纳州
佛罗里达州
3弗吉尼亚州
4纽约

是否建议您也可以将元素从一个容器拖到另一个容器？这在本代码中已经是可能的，我只想更新数字以匹配被拖动元素的新位置。将

列表样式类型设置为
decimal
，这不是一个选项吗？这是一种方法，但我感兴趣的是学习如何在Javascript中实现它，以便在它不在