1.js: 23 Uncaught TypeError: Fehler beim Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'

Question

Ich versuche, Drag-and-Drop-Schnittstelle für einige Eingaben in seinem Formular zu verwenden die beiden Funktionen-Handler für das:

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)); 
} 

und wenn ich auf sie das Eingangselement zu fallen ist ihre Position versuche ich den Fehler. Wie soll ich das beheben und was ist der Grund?

Answer 1

getElementById Durchsucht den DOM-Baum nach einem Element mit der ID, die Sie als Parameter angegeben haben. In Ihrem Fall ist es der Wert input1.

So müssen Sie die id der div, die Sie auf den Wert der input1 ziehen.

Wie ich glaube nicht, dass das, was Sie beabsichtigt, sollten Sie eine ID an das ziehbare Element setzen:

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

Und dann:

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

Oder man kann es gerne weitergeben:

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

und dann:

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

Hier ist ein fiddle