1.js：23 Uncaught TypeError： 'Node'で 'appendChild'を実行できませんでした：パラメータ1のタイプが 'Node'ではありません

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は、パラメータとして指定したIDを持つ要素のDOMツリーを検索します。あなたの場合、それは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