这种类型的动态页面创建功能必须在没有id属性的情况下完成，它们很容易出错，而且维护起来非常困难。
拖放功能由多个事件组成。您不应该在dragstart上执行所有操作，拖放有其自己的事件drop，在此期间，您应该将元素附加到目标元素。并且，永远不要对元素使用内联侦听器。在这种情况下，将delegatedragstart事件添加到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>