Set draggable="true", stash data in dragstart (e.dataTransfer.setData), and crucially call e.preventDefault() in dragover so the drop zone accepts the drop — then read the data in drop. File drops expose e.dataTransfer.files. The missing dragover preventDefault is the #1 "drop doesn't work" bug.
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><div id="c" draggable="true" style="display:inline-block;padding:8px;background:#b388ff;color:#06040d">drag</div><div id="z" style="margin-top:12px;border:2px dashed #2a1d4a;padding:20px">drop here</div>
<script>const c=document.getElementById('c'),z=document.getElementById('z');c.ondragstart=e=>e.dataTransfer.setData('t','x');z.ondragover=e=>e.preventDefault();z.ondrop=e=>{e.preventDefault();z.appendChild(c);};</script></body></html>