Electron + node.jsで作成したアプリでドラッグアンドドロップする(Windows)

Electron + node.jsで作成したアプリでドラッグアンドドロップする(Windows)

ElectronでDrag&Dropを実装してみました。

チュートリアルを見る限りドラッグするファイルはフルパスじゃないと駄目なようであまり使い道が思いつきません。

前提

OS ドラッグするファイルパス
Windows c:\electron\draganddrop\README.md

メインプロセス

ipc通信でドラッグアンドドロップを実装します。

ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
  file: filePath,
  icon: path.join(__dirname, '/img/read.png') // プロジェクト配下に用意する(必須)
  })
})

レンダラープロセス

const { ipcRenderer } = require('electron')

document.getElementById('drag').ondragstart = (event) => {
  event.preventDefault()
  ipcRenderer.send('ondragstart', 'C:\\electron\\draganddrop\\README.md') // 第二引数はフルパス
}

ウィンドウ

表示するindex.htmlです。

<body>
  <a href="#" id="drag" draggable="true">Drag me</a> <!-- ここをドラッグアンドドロップ -->
  <script src="renderer.js"></script>
</body>
GitHub - takahashi-h5/electron-draganddrop01
Contribute to takahashi-h5/electron-draganddrop01 development by creating an account on GitHub.
Native File Drag & Drop | Electron
Certain kinds of applications that manipulate files might want to support the operating system's native file drag & drop...

コメント

タイトルとURLをコピーしました