拖拽操作后输入框数据丢失问题求助

你遇到的输入框数据丢失问题，核心原因是错误使用innerHTML保存和交换拖拽内容：

1. 用户在输入框中输入的内容，仅存储在输入框的value属性中，不会同步更新到元素的innerHTML里。innerHTML仅保留元素创建时的初始HTML结构（包括输入框的初始value值）。
2. 你的代码在ondragstart事件中存入dataTransfer的是拖拽元素的初始innerHTML，其中输入框的值还是创建时的默认值，并非用户输入后的实时内容。
3. 在ondrop事件中，你用这个初始状态的innerHTML替换目标元素内容，同时将目标元素的初始innerHTML赋值给拖拽元素，相当于把两个元素都重置回初始状态，直接覆盖了用户输入的内容。

另外，ondrop事件中缺少e.preventDefault()调用，部分浏览器可能触发默认拖拽行为（如页面跳转），干扰正常的内容交换逻辑。

不要通过innerHTML交换整个元素结构，直接操作输入框的value属性来交换实时数据。以下是修改后的代码示例：

const divs = document.querySelectorAll(".box")

let dragged

for (let div of divs)
{
    div.ondragstart = (e) =>
    { 
        dragged = div     
        // 提取当前div内输入框的实时值（多输入框可扩展逻辑）
        const input = div.querySelector('input');
        const content = input ? input.value : div.textContent;
        e.dataTransfer.setData("text/plain", content)
    };

    div.ondragover = (e) => e.preventDefault()

    div.ondrop = (e) =>
    {
        e.preventDefault(); // 必须阻止默认行为，避免浏览器干扰
        const targetInput = div.querySelector('input');
        const draggedInput = dragged.querySelector('input');

        if (targetInput && draggedInput) {
            // 交换两个输入框的实时值
            const tempValue = targetInput.value;
            targetInput.value = e.dataTransfer.getData("text/plain");
            draggedInput.value = tempValue;
        } else {
            // 处理无输入框的元素，沿用原逻辑交换文本内容
            const tempHTML = div.innerHTML;
            div.innerHTML = e.dataTransfer.getData("text/plain");
            dragged.innerHTML = tempHTML;
        }
    };
}

let divTable = document.createElement("div");
divTable.id = "DivTableGroupe" + numTableau;
divTable.className = "box" ;
divTable.draggable = "true";

• 存储实时数据：拖拽时不再保存innerHTML，而是直接提取输入框的value（或普通文本内容），确保存储的是用户操作后的最新数据。
• 操作value属性交换：针对输入框直接交换value值，而非替换整个HTML结构，完整保留用户输入内容。
• 添加默认行为阻止：在ondrop中调用e.preventDefault()，避免浏览器默认拖拽行为干扰逻辑。

内容的提问来源于stack exchange，提问作者Léo PIGNATONE