It's because the element you have registered the handlers to has a height of 0, so it's impossible to drag n drop onto. Is there a reason for using "fb-root"? I'm not even sure whats it's supposed to be for. If you just want the entire page then document.body is ideal.
There's an easier way to bind events to elements than what you've used BTW. HTMLElements have the method addEventListener which allows you to attach a function to an event. It's simple and clean. Typically adding an attribute with a snippet of script like you do there is only used in HTML files to make it clearer that an event is bound to that particular element, but as your manipulating the element in JS it makes sense to use addEventListener instead. Here's an example of using it to listen to "click" events from an element.
function onclick (e) {
console.log("something clicked!");
}
const element = document.getElementById("myelement");
element.addEventListener("click", onclick);
Note that you pass in a reference to the onclick function, not a string, and that the name of the event isn't prefixed with "on".
Here's a lightly modified version of your script which should work.
function ondrop(ev) {
//prevents file from being opened
ev.preventDefault();
console.log('drop', ev);
}
function ondragover(ev) {
ev.preventDefault();
// ev.dataTransfer.dropEffect = "move";
console.log('drag', ev);
}
runOnStartup(async runtime =>
{
const element= document.body;
element.addEventListener("drop", ondrop);
element.addEventListener("dragover", ondragover);
});