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.

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')
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​

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 :

docs/fiddles/features/drag-and-drop (33.2.1)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