Estoy creando una selección archivada dinámicamente en función de una lista de datos que se recupera del lado del servidor.

 var DataList1 = [{'id':'54423232', 'name':file1.txt}, {'id':'54423232', 'name':file2.txt}]; const DataSelect = document.createElement('select'); DataSelect.ondrop="drop(event)"; DataSelect.ondragover="allowDrop(event)"; for (var i = 0; i < DataList1.length; i++) { const opt = DataList1[i].name; const el = document.createElement("option"); el.textContent = opt; el.value = DataList1[i].id DataSelect.appendChild(el); }

También estoy creando una tabla de datos basada en un DataList2

 var DataList2 = [{'id':'54423242', 'name':file3.txt}, {'id':'544237852', 'name':file4.txt}]; for(var i = 0; i < DataList2.length; i++) { var InnerElemet = `<div class="data-header"><b> ${DataList2[i]['name']} </b></div> <div class="data-description"> ${DataList2[i]['id']} </div>` var DataTableElement = document.createElement('li') DataTableElement.className = 'data-set-row' DataTableElement.innerHTML = InnerElemet DataTableElement.draggable = 'true' DataTableElement.ondragstart = "drag(event)" DataTable.append(DataTableElement) }

Quiero hacer que esta fila de la tabla de datos se pueda arrastrar y soltar en el archivo seleccionado y quiero agregar estos datos soltados como una nueva opción seleccionada.

Estoy aprendiendo javascript para mi proyecto y me he quedado atascado en este punto, sugiera una solución.

Gracias