Хорошо, я собрал небольшой пример. Вам придется изменить это, потому что он работает только для перемещения файлов на одном диске.
Вот мой index.html с двумя div для проверки элемента управления перетаскиванием:
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<body>
<div id="sourceDrive" class="drive" ondrop="dropOnSource(event)" ondragover="allowDrop(event)"></div>
<div id="destinationDrive" class="drive" ondrop="dropOnDestination(event)" ondragover="allowDrop(event)"></div>
</body>
И соответствующий app.js:
const electron = require('electron');
const ipc = electron.ipcRenderer;
function loadFiles(){
ipc.send("loadFiles");
}
loadFiles();
ipc.on('sourceFiles', (ev, args) => {
document.querySelector("#sourceDrive").innerHTML = "";
args.forEach(file => {
document.querySelector("#sourceDrive").innerHTML += '<div id="'+file+'" draggable="true" ondragstart="drag(event)">'+file+'</div>';
});
})
ipc.on('destinationFiles', (ev, args) => {
document.querySelector("#destinationDrive").innerHTML = "";
args.forEach(file => {
document.querySelector("#destinationDrive").innerHTML += '<div id="'+file+'" draggable="true" ondragstart="drag(event)">'+file+'</div>';
});
})
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dropOnSource(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ipc.send('moveToSource', data);
loadFiles();
}
function dropOnDestination(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ipc.send('moveToDestination', data);
loadFiles();
}
А вот и main.js:
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const ipc = electron.ipcMain;
const fs = require("fs");
let mainWindow;
const sourcePath = "fileSource";
const destinationPath = "fileDestination";
app.on('ready', _ => {
console.log("App running");
mainWindow = new BrowserWindow({
width: 600,
height: 400
});
mainWindow.loadURL('file://' + __dirname + '/ui/index.html');
ipc.on("loadFiles", (event, arg) => {
var fileStackSource = [];
fs.readdirSync(sourcePath).forEach(file => {
fileStackSource.push(file);
});
var fileStackDestination = [];
fs.readdirSync(destinationPath).forEach(file => {
fileStackDestination.push(file);
});
mainWindow.webContents.send('sourceFiles', fileStackSource);
mainWindow.webContents.send('destinationFiles', fileStackDestination);
});
ipc.on('moveToSource', (event, arg) => {
console.log("moving " + arg + " from " + destinationPath + " to " + sourcePath);
fs.renameSync(destinationPath + "/" + arg, sourcePath + "/" + arg);
});
ipc.on('moveToDestination', (event, arg) => {
console.log("moving " + arg + " from " + sourcePath + " to " + destinationPath);
fs.renameSync(sourcePath + "/" + arg, destinationPath + "/" + arg);
});
});
Мой каталог выглядит следующим образом:
- main.js
- index.html
- app.js
fileSource
fileDestination
Это должно помочь вам понять основы того, что вы планируете делать. Если вы все еще не уверены в основах работы с электронами, я бы рекомендовал вам начать с этого.