我有代码允许我拖放以重新排列项目并将它们从一个容器移动到另一个容器，但我也想更新 span 标签内的数字以匹配它的位置。
例如，“科罗拉多”在 0 位置，但是当我将它拖到“犹他州”之后时，我想更新“蒙大拿州”以使其旁边有“0”，“犹他州”为“1”，“科罗拉多州”为“2”，但我不知道该怎么做。
这是 JS 小提琴：https : //jsfiddle.net/benschnell/0wbfoqk9/
const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')
draggables.forEach(draggable => {
draggable.addEventListener('dragstart', () => {
draggable.classList.add('dragging')
})
draggable.addEventListener('dragend', () => {
draggable.classList.remove('dragging')
})
})
containers.forEach(container => {
container.addEventListener('dragover', dragOver);
})
function dragOver(e) {
e.preventDefault()
const afterElement = getDragAfterElement(this, e.clientY)
const draggable = document.querySelector('.dragging')
if (afterElement == null) {
this.appendChild(draggable)
} else {
this.insertBefore(draggable, afterElement)
}
}
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
return draggableElements.reduce((closest, child) => …javascript ×1