电子Js，拖放，JavaScript

Posted 2021-04-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了电子Js，拖放，JavaScript相关的知识，希望对你有一定的参考价值。

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

答案

好的，我把一个快速的例子放在一起。您必须修改它，因为它仅适用于在同一驱动器上移动文件。

这是我的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