Soy nuevo en JS y HTML, pero espero que esto no suene tonto ahora. Tengo una lista en el lado derecho donde se muestran un montón de botones que quiero poder arrastrar y soltar en la tabla vacía del lado izquierdo.

Lo que ya hice:

Con el código que obtuve atm me sale este error

Error al ejecutar 'appendChild' en 'Nodo': el parámetro 1 no es del tipo 'Nodo'

Así que ya descubrí que el método devuelve una cadena en lugar de un elemento de nodo y este método solo puede agregar elementos con ese tipo. Entonces, ¿cómo muevo la entrada como un elemento de nodo? ¿Hay mejores maneras de hacer eso?

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 para la lista de botones

 @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> }

Mesa:

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