Browser quirks aside, HTML5 drag and drop works between different windows of the same browser. When I run up the web app in different browsers, I still get the dragover events but the data is missing.
Here are the the dragStart and dragOver handlers. Not very interesting, they just implement what MDN tells you to do. The code is Typescript.
public dragStart(e: DragEvent): boolean {
e.dataTransfer.setData("text/json", JSON.stringify(this.Model));
return true;
}
public dragOver(e: DragEvent): boolean {
if (e.dataTransfer.items.length) {
let raw = e.dataTransfer.items[0];
if (raw && raw.type === "text/json") {
//highlight drop target
}
return false;
}
return true;
}
This code running in two Chrome windows, it works - I can drag between the windows. This code running in two Firefox windows, it works.
Chrome to Firefox, or Firefox to Chrome, I get events but no data.
Why and what can I do about this? And if it cannot be made to work, what's the point of firing drag events for drag from another app if you (Google, Mozilla etc) aren't going to surface the data?
This probably isn't the end of the world for copying from one browser app to another; a given user will more than likely use the same browser for both. But I had visions of interop with desktop applications, and this does not bode well.
When I change the "mime type" used with setData and getData from text/json (which is what the data is) to text/plain, suddenly it works between Firefox and Chrome, and I can also drag a node to a text editor, where unsurprisingly the JSON is inserted as text.
And it works with Edge now. Crikey, according to mdn you can make up your own values. They left out "but not if you want interop with another app"
I had thought to use the type to decide whether to allow drop, and text/plain does little to help me wit that. I can try a parse and if that succeeds I can check some attributes, but this is rather heavyweight, and according to Drag'n'drop dataTransfer.getData empty it won't work anyhow.
