无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”，无法拖放div

Question

我正在尝试将带有一些输入标签的html div元素拖放到另一个div，但出现错误Uncaught TypeError：无法在“ Node”上执行“ appendChild”：参数1的类型不是“ Node”

    <div class="drag">
        <div>
            <form action="#">
                <div draggable="true" ondragstart="dragOn(event)">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" placeholder="This element is draggable">
                </div>
            </form>
        </div>
    </div>
    <div id="dragH" class="drop" ondrop="dropOn(event)" ondragover="dragOver(event)">

<script>
dropOn = (ev) => {
  ev.preventDefault();

  const data = ev.dataTransfer.getData('my-form');
  ev.target.appendChild(document.getElementById(data))

}


dragOn = (e) => {
    e.dataTransfer.setData('my-form', e.target.id);
    e.dataTransfer.dropEffect = 'move';
}

dragOver = (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}
</script>