如何克隆一个元素，然后将id加1

Question

嗨，我试图创建一个表单构建器我接近这通过创建元素，把它们是一个列表组，然后使它们可拖动。到目前为止，这是有效的，但是当我拖拽项目并将它从元素部分消失时，这是有意义的，但我希望它找到已选择的项目的id，然后复制元素，但使用不同的id。

这是我到目前为止的代码JavaScript

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
console.log("Component Selected")
var elem = document.querySelector(ev.target.id);
var clone = elem.cloneNode(true);
clone.id = ('drag9');
elem.after(clone);
}


<div class="row">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<ul class="list-group">
<li draggable="true" ondragstart="drag(event)" id="drag1" class="list-group-item">
<label for="exampleFormControlInput1" 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>

Answer 1

这种类型的动态页面创建功能必须在没有id属性的情况下完成，它们很容易出错，并且是维护的噩梦。

拖放功能由多个事件组成。你不应该在dragstart上做所有的事情，丢弃有它自己的事件-drop-在此期间，你应该将元素附加到目标元素。而且，永远不要对元素使用内联侦听器。在这种情况下，将dragstart事件委托给ul容器是很有用的。

当你拖动一个元素时，它应该只在一个元素上被拖放，这个元素是允许被拖放的元素的父元素(li元素的父元素只有menu,ul和ol，它不应该在div上被拖放)。

由于拖放API没有提供一个属性，您可以在其中存储对实际拖动元素的实时引用，因此最好在dragstart事件触发时将其存储在变量中。这解决了id属性和所有不必要的DOM遍历的需要。

考虑到这些，我已经创建了一个完全id的示例代码，说明如何实现一个简单的拖放，您可以根据您的需要进一步开发它。

const dragSrc = document.body.querySelector('.dragSrc'),
dropPad = document.body.querySelector('.dropTarget');
let draggedElement = null;
dragSrc.addEventListener('dragstart', e => {
draggedElement = e.target;
});
dropPad.addEventListener('dragover', e => {
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
dropPad.addEventListener('drop', e => {
e.preventDefault();
const clone = draggedElement.cloneNode(true);
e.target.appendChild(clone);
});

.dropTarget {
position: relative;
width: 400px;
height: 100px;
border: 1px solid #000;
}

<div class="row">
<ul class="list-group dragSrc">
<li draggable="true" class="list-group-item">
<label class="form-label">Email:
<input type="email" class="form-control" placeholder="">
</label>
<button type="button" class="fa-solid fa-pen-to-square fa-lg">Button</button>
</li>
</ul>
</div>
<ul class="list-group dropTarget"></ul>