Tengo una matriz de intervalos creada dinámicamente aquí:

 button.onclick = (e) => { e.preventDefault(); str = inputIn.value; inputIn.value = ''; } for (let i = 0; i < str.length; i++) { const span = document.createElement('span'); span.textContent = str[i]; document.body.appendChild(span); //--- save old position let rect = span.getBoundingClientRect(); span.setAttribute('oldleft', `${rect.left}px`); span.setAttribute('oldtop', `${rect.top}px`); // call moving/swapping func onClickAndMove(span);`

después de eso, cada elemento tiene dos posiciones valiosas como actual, representadas por (izquierda, arriba) y guardadas desde el último cuerpo. Haga clic en los atributos como (antiguo a la izquierda, arriba). El código directo desde la consola está aquí:

 <span id="0" oldleft="624.71875px" oldtop="166.5px" style="margin: 2px; border: 1px solid rgb(0, 0, 0);">Q</span> <span id="1" oldleft="631.71875px" oldtop="166.5px" style="margin: 2px; border: 1px solid rgb(0, 0, 0);">W</span>

primero haga clic en el primer elemento, comience a moverse después del puntero del mouse, segundo haga clic en el puntero del mouse en la posición del clic en el cuerpo. Hago lo mismo con el segundo elemento. Después de eso, todo debe funcionar de la siguiente manera: en los elementos superpuestos (uno está enganchado al puntero del mouse y) en el evento de clic, deben intercambiarse debido a la regla. El elemento debe tomar lugar en la posición del puntero del mouse al hacer clic. Lo que realmente sucede es lo siguiente: en el intercambio de 0 elementos con 1 elemento, todo funciona bien, se intercambian como deben. al intercambiar 1 elemento con 0 elementos, los atributos de 1 elemento (oldleft/oldtop) no coinciden con la posición real de 1 elemento. La función para renovar la posición del elemento anterior está aquí:

 function saveOldLeftTop(char) { let rect = char.getBoundingClientRect(); char.setAttribute('oldleft', `${rect.left}px`); char.setAttribute('oldtop', `${rect.top}px`); }