Question

我是Electron Framework的新手。我正在尝试使用Electron Framework开发桌面应用程序。我想在左侧有本地目录的地方实现一个类似团队查看器的用例，而在右侧有网络目录。我想使用拖放功能将文件或文件夹从本地复制到网络。我应该如何在JavaScript中做到这一点？

Answer 1

您可以使用Electron做到这一点。

对于您的拖放逻辑，可以尝试以下操作：Drag&Drop Electron 或仅在一个窗口内使用它就使用任何html / js拖放库。

您可以使用节点模块访问文件，在这种情况下，您可以使用文件系统模块Node FS。

Answer 2

好的，所以我举一个简单的例子。您将不得不对其进行修改，因为它仅适用于在同一驱动器上移动文件。

这是我的带有两个div的index.html，用于测试拖动控件：

<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

ui

-index.html

-app.js

fileSource
fileDestination

这应该有助于您了解计划要做的事情的基本知识。如果您仍然不确定电子的基础知识，建议您从此开始。

电子Js，拖放，JavaScript

2 个答案: