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.
github.com
Native File Drag & Drop | Electron
Certain kinds of applications that manipulate files might want to support the operating system's native file drag & drop...
electronjs.org
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント