Magic Dragin fixesdrag and drop in custom web pages
Drag files from custom web pages intoany web page or Windows app
Add file dragging to your web page
Any web page element can be made draggable, so that users on Chrome, Edge, and other Chromium-based browsers can drag it as a file to a folder in Explorer. Add a draggable attribute and a dragstart handler that sets a DownloadURL data type.
Learn more about dragging files to Explorer on MDN.
HTML
<div id="hello-world-file" draggable="true">
Drag hello-world.txt
</div>JavaScript
const element = document.getElementById("hello-world-file");
element.addEventListener("dragstart", (event) => {
const type = "text/plain";
const name = "hello-world.txt";
const url = "https://magicdragin.app/hello-world.txt";
event.dataTransfer.setData("DownloadURL", `${type}:${name}:${url}`);
});Drag beyond Explorer with Magic Dragin
By itself, you can drag the file to a folder in Explorer, but not to other web pages or Windows apps. Magic Dragin makes the drag work anywhere.
What the drop target receives
On a receiving web page, a drop handler can inspect event.dataTransfer.
Learn more about the DataTransfer API on MDN.
dropZone.addEventListener("drop", (event) => {
// Inspect event.dataTransfer here.
});Without Magic Dragin
No files are available to the receiving page.
{
"types": [],
"items": [],
"files": []
}With Magic Dragin
The file appears just like one dragged from Explorer.
{
"types": [
"Files"
],
"items": [
{
"kind": "file",
"type": "text/plain"
}
],
"files": [
{
"name": "hello-world.txt",
"type": "text/plain",
"size": 30,
"text": "Hello world from Magic Dragin."
}
]
}Try it
Open the drop inspector window, then drag the hello-world.txt file into it.
Drag from Electron and WebView2 apps too
Want to drag files from an Electron or WebView2-based app? Reach out to add support for your app to Magic Dragin.
Ready to fix drag and drop?
Free for 21 days. Works immediately after install, no signup or setup needed.