如何克隆元素并递增ID？表单构建器拖拽复制功能实现

问题分析 #

你当前的代码存在几个关键问题：

• document.querySelector(ev.target.id) 写法错误，querySelector 需要带选择器前缀（如#drag1），直接用ev.target就能获取拖拽元素
• 硬编码新ID为drag9，未实现原ID数值加1的动态生成逻辑
• 在dragstart事件中直接复制元素，会导致拖拽前就生成副本，不符合"拖拽后在目标区域生成副本、原元素保留"的需求

以下是修正后的完整实现：

完整代码 #

JavaScript

function drag(ev) {
    // 传递拖拽元素的ID
    ev.dataTransfer.setData("text", ev.target.id);
    console.log("Component Selected");
}

function allowDrop(ev) {
    // 阻止默认行为，允许元素放置
    ev.preventDefault();
}

function drop(ev) {
    ev.preventDefault(); // 阻止默认拖拽移动行为，保留原元素
    const originalId = ev.dataTransfer.getData("text");
    const originalElem = document.getElementById(originalId);

    // 复制元素（true表示深度复制所有子元素）
    const clone = originalElem.cloneNode(true);

    // 生成新ID：提取原ID的数字部分，加1后拼接前缀
    const idNum = parseInt(originalId.replace(/\D/g, ""), 10);
    clone.id = `drag${idNum + 1}`;

    // 同步更新副本内的表单关联属性（避免ID冲突）
    const input = clone.querySelector("input");
    if (input) {
        const inputNum = parseInt(input.id.replace(/\D/g, ""), 10);
        input.id = `ControlInput${inputNum + 1}`;
        const label = clone.querySelector("label");
        if (label) {
            label.setAttribute("for", input.id);
        }
    }

    // 将副本添加到目标区域的列表中
    ev.target.querySelector(".list-group").appendChild(clone);
}

HTML

<div class="row">
    <!-- 原始组件区 -->
    <div class="col-4">
        <h5>组件库</h5>
        <ul class="list-group">
            <li draggable="true" ondragstart="drag(event)" id="drag1" class="list-group-item">
                <label for="ControlInput1" class="form-label">Input</label>
                <button type="button" class="fa-solid fa-pen-to-square fa-lg"></button>
                <input type="email" class="form-control" id="ControlInput1" placeholder="">
            </li>
        </ul>
    </div>
    <!-- 拖拽目标区 -->
    <div class="col-8" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
        <h5>表单画布</h5>
        <ul class="list-group">
            <!-- 拖拽生成的副本会插入到这里 -->
        </ul>
    </div>
</div>

关键说明 #

1. 保留原元素：在drop事件中调用ev.preventDefault()，阻止浏览器默认的拖拽移动行为，确保原始组件不会从组件区消失
2. 动态生成新ID：用正则/\D/g提取原ID中的数字部分，加1后重新拼接前缀，保证每个副本ID唯一
3. 同步表单关联：更新副本内label的for属性和input的id属性，避免多个表单元素共用同一ID导致功能异常

内容的提问来源于stack exchange，提问作者user20654632