Drag & Drop de Fichier natif

Vue d'ensemble​

Certains types d'applications manipulant des fichiers peuvent prendre en charge la fonction de glisser-déplacer native du système d'exploitation. Le déplacement de fichiers dans un contenu Web est courant et est supporté par de nombreux sites Web. Electron prend également en charge le déplacement des fichiers et du contenu du contenu Web vers l'univers du système d'exploitation.

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

Exemple​

Exemple illustrant comment créer un fichier à la volée et que celui-ci puisse être glissé hors de la fenêtre jusqu'au bureau.

Preload.js​

In preload.js use the contextBridge to inject a method window.electron.startDrag(...) that will send an IPC message to the main process.

const{ contextBridge, ipcRenderer }=require('electron')

contextBridge.exposeInMainWorld('electron',{
startDrag:(fileName)=> ipcRenderer.send('ondragstart', fileName)
})

Index.html​

Ajoutez ensuite un élément glissable dans le fichier index.html, et référencez votre script de rendu :

<divstyle="border:2px solid black;border-radius:3px;padding:5px;display:inline-block"draggable="true"id="drag">Déplacez-moi</div>
<scriptsrc="renderer.js"></script>

Renderer.js​

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

document.getElementById('drag').ondragstart=(event)=>{
 event.preventDefault()
window.electron.startDrag('drag-and-drop.md')
}

Main.js​

Dans le processus principal (fichier main.js ), vous devez étendre l'événement reçu en lui ajoutant le chemin du fichier en train d'être glissé et une icône :