Im new to JS and HTML, but I hope this doesnt sound dumb now. Ive got a list on the right side where a bunch of buttons are shown which I want to be able to drag and drop them into the empty table on the left side.

What I done already:

With the code I got atm i get this error

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

So I already found that the method is returning a string instead of a node element and this method can only append elements with that type. So how do I move the input as a node element? Are there better ways to do that?

JavaScript:

function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
  console.log(data);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data).value);
  console.log(data);
}

Script for the button list

@foreach (var t in ct.cases)
{
<div class="database-cases" data-tooltip="@t.Title" draggable="true" ondragstart="drag(event)" id="dragbutton">
  <input class="database-cases-id btn btn-link" type="button" value="@t.IdText" onclick="" />
  <sub class="database-cases-title">@t.Title</sub>
</div>
}

Table:

<table class="overallTable" summary="Layout" ondrop="drop(event)" ondragover="allowDrop(event)" id="dropzone"></table>