1.js：23 Uncaught TypeError：無法執行'節點'上的'appendChild'：參數1不是'節點'類型

Question

我想使用拖放界面移動他的窗體中的一些輸入，這兩個功能，處理程序爲：

let drag = (event) => { 
    event.dataTransfer.setData("application/x-moz-node", input1); 
    event.dataTransfer.effectAllowed = "move"; 
}; 

let drop = (event) => { 
    event.preventDefault() 
    let data = event.dataTransfer.getData("application/x-moz-node"); 
    event.target.appendChild(document.getElementById(data)); 
} 

，每當我想放棄它的輸入元素的她的位置，我得到的錯誤。我應該如何解決這個問題，原因是什麼？

Answer 1

getElementById在DOM樹中搜索具有您指定的ID作爲參數的元素。在你的情況下，它的價值是input1。

因此，您必須將div的id設置爲您拖動到的值input1。

因爲我不認爲這是您的本意，你應該把一個ID，然後拖動元素：

<div id="draggable-element" draggable="true" ondragstart="drag(event)"> 

然後：

ev.target.appendChild(document.getElementById('draggable-element')); 

或者，你可以通過它喜歡：

event.dataTransfer.setData("application/x-moz-node", input1); 
event.dataTransfer.setData("my-draggable-id", ev.target.id); 

然後：

let data = event.dataTransfer.getData("application/x-moz-node"); 
let draggableId= event.dataTransfer.getData("my-draggable-id"); 
event.target.appendChild(document.getElementById(draggableId)); 

這是一個fiddle