Native File Drag & Drop

    To implement this feature in your app, you need to call the webContents.startDrag(item) API in response to the event.

    Example

    An example demonstrating how you can create a file on the fly to be dragged out of the window.

    Add a draggable element to index.html, and reference your renderer script:

    1. <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">Drag me</div>
    2. <script src="renderer.js"></script>

    In renderer.js set up the renderer process to handle drag events by calling the method you added via the contextBridge above.

    • index.html
    • main.js
    • preload.js
    1. <!DOCTYPE html>
    2. <html>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7. </head>
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
    11.     <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
    13. </body>
    14. </html>
    1. const { contextBridge, ipcRenderer } = require('electron')
    2. const path = require('path')
    4. contextBridge.exposeInMainWorld('electron', {
    5.   startDrag: (fileName) => {
    6.     ipcRenderer.send('ondragstart', fileName)
    7.   }

    After launching the Electron application, try dragging and dropping the item from the BrowserWindow onto your desktop. In this guide, the item is a Markdown file located in the root of the project: