时间戳

首页 > 解决方案 > 点击后动态创建的跨度和交换跨度

javascript - 点击后动态创建的跨度和交换跨度

问题描述

我在这里有一个动态创建的跨度数组：

    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);`

之后，每个元素都有两个有价值的位置作为当前位置，由 (left,top) 表示并从最后一个 body.click 属性保存为 (oldleft, olttop)。来自控制台的直接代码在这里：

<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>

第一次单击第一个元素在鼠标指针之后开始移动，第二次单击它在正文中获得鼠标指针 onclick 位置。我对第二个元素做同样的事情。之后，所有内容都必须按如下方式工作：在重叠元素（一个被连接到鼠标指针和）上单击事件时，它们必须交换，因为规则首先不被连接元素出现在第二个的（oldleft / oldtop）位置被连接的时刻元素和第二个元素必须在点击时占据鼠标指针位置。实际发生的情况如下：在将 0 元素与 1 元素交换时，一切正常，它们必须交换。在将 1-element 与 0-element 交换时，1-element (oldleft/oldtop) 的属性与 1-element 的实际位置不匹配。更新旧元素位置的功能在这里：

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

标签： javascripthtmlonclickblockswap

解决方案

推荐阅读