electron Js、拖放、JavaScript_Javascript_Drag And Drop_Electron

electron Js、拖放、JavaScript

javascript electron

electron Js、拖放、JavaScript,javascript,drag-and-drop,electron,Javascript,Drag And Drop,Electron,我不熟悉电子结构。我正在尝试使用Electron框架开发桌面应用程序。我想在左侧实现一个像TeamViewer这样的用例，在左侧我有本地目录，在右侧我有网络目录。我想使用拖放功能将文件或文件夹从本地复制到网络。我应该如何在JavaScript中做到这一点？您可以使用Electron做到这一点对于拖放逻辑，您可以尝试以下方法：如果您只需要在一个窗口中使用任何html/js拖放库，也可以使用它您可以使用节点模块访问文件，在这种情况下，您可以使用文件系统模块。您可以使用Electron来访问文件

我不熟悉电子结构。我正在尝试使用Electron框架开发桌面应用程序。我想在左侧实现一个像TeamViewer这样的用例，在左侧我有本地目录，在右侧我有网络目录。我想使用拖放功能将文件或文件夹从本地复制到网络。我应该如何在JavaScript中做到这一点？

您可以使用Electron做到这一点

对于拖放逻辑，您可以尝试以下方法：如果您只需要在一个窗口中使用任何html/js拖放库，也可以使用它

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

您可以使用Electron来访问文件

对于拖放逻辑，您可以尝试以下方法：如果您只需要在一个窗口中使用任何html/js拖放库，也可以使用它

您可以使用节点模块访问文件，在本例中，您可以使用文件系统模块。

好的，我来举一个简单的例子。您必须修改它，因为它只适用于移动同一驱动器上的文件

下面是我的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>

我的目录如下所示：

main.js
用户界面

--index.html

--app.js

文件源
文件目的地

这将帮助你了解你计划做什么的基础。如果你还不确定电子的基础知识，我建议你从这个开始。

好的，我举一个简单的例子。您必须修改它，因为它只适用于移动同一驱动器上的文件

下面是我的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>

我的目录如下所示：

main.js
用户界面

--index.html

--app.js

文件源
文件目的地

这将帮助你了解你计划做什么的基础。如果您仍然不确定electron的基础知识，我建议您从这一点开始。

“对于拖放逻辑，您可以尝试以下方法：拖放electron，或者如果您只需要在一个窗口中使用任何html/js拖放库，则只需使用它。”如何实现？您想要两个浏览器窗口并从一个拖动到另一个还是一个窗口并在其中拖动？是的，或多或少像一个团队查看器。我想要从一个有本地目录的div中拖动，而在另一个div中有linux目录。我只想将一个文件或文件夹从本地拖动到网络。拖放会发生，但没有复制文件。请找到使用IPCRenderer向main.js发送消息所需的render.js链接main.html，在main.js中侦听该消息，如果收到该消息，请复制该文件。您可能会在drop函数中发送上述消息。您需要将id或完整路径作为参数传递。“对于拖放逻辑，您可以尝试这样做：拖放Electron，或者如果只需要在一个窗口中使用任何html/js拖放库，则只需使用它。”如何实现？您想要两个浏览器窗口并从一个拖动到另一个还是一个窗口并在其中拖动？是的，或多或少像一个团队查看器。我想要从一个有本地目录的div中拖动，而在另一个div中有linux目录。我只想将一个文件或文件夹从本地拖动到网络。拖放会发生，但没有复制文件。请找到使用IPCRenderer向main.js发送消息所需的render.js链接main.html，在main.js中侦听该消息，如果收到该消息，请复制该文件。您可能会在drop函数中发送上述消息。您需要将id或完整路径作为参数传递。

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);
    });
});