Aller au contenu principal

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.

Pour implémenter cette fonctionnalité dans votre application, vous devez appeler l'API webContents.startDrag(item) dans la réponse à l'événement ondragstart.

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​

Dans preload.js utilisez le contextBridge pour injecter une méthode window.electron.startDrag(...) qui enverra un message IPC au processus principal.

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

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

Index.html​

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

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

Renderer.js​

Dans renderer.js, configurez le processus de rendu pour gérer les événements de glissement en appelant la méthode que vous avez ajoutée via le contextBridge ci-dessus.

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 :

docs/fiddles/features/drag-and-drop (33.2.0)Open in Fiddle
const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')
const fs = require('node:fs')
const https = require('node:https')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

const iconName = path.join(__dirname, 'iconForDragAndDrop.png')
const icon = fs.createWriteStream(iconName)

// Create a new file to copy - you can also copy existing files.
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop')
fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop')

https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => {
  response.pipe(icon)
})

app.whenReady().then(createWindow)

ipcMain.on('ondragstart', (event, filePath) => {
  event.sender.startDrag({
    file: path.join(__dirname, filePath),
    icon: iconName
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Après avoir lancé l'application Electron, essayez de glisser-déposer l'élément depuis la BrowserWindow jusqu'à votre bureau. Dans ce guide, l'élément est un fichier Markdown situé à la racine du projet :

Glisser-déposer