Электронный Js, Drag-drop, JavaScript
Я новичок в Electron Framework. Я пытаюсь разработать настольное приложение с помощью Electron Framework. Я хочу реализовать такой вариант использования, как просмотрщик команд с левой стороны, где у меня есть локальные каталоги, а с правой стороны - сетевые каталоги. Я хочу скопировать файл или папку из локальной сети в сеть с помощью функции перетаскивания. Как мне это сделать в JavaScript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете сделать это с помощью Electron.
Для вашей логики перетаскивания вы можете попробовать следующее: Перетащите и отпустите электрон или просто используйте любую библиотеку перетаскивания html / js, если она вам нужна только внутри одного окна.
Вы можете получить доступ к файлам с помощью узловых модулей, в этом случае вы можете использовать модуль файловой системы Узел ФС.
Вы хотите два BrowserWindows и перетаскивать их из одного в другое или из одного окна и перетаскивать внутри него?
Да, более или менее похоже на просмотрщик команды. Я хочу перетащить из одного div, в котором у меня есть локальный каталог, а в другом div есть каталог linux. Я просто хочу перетащить файл или папку из локального в сеть. Перетаскивание и падение происходит но копирование файла не происходит.
Найдите ссылку на render.js docs.google.com/document/d/… main.html docs.google.com/document/d/…
Вам нужно отправить сообщение на ваш main.js с помощью IPCRenderer, прослушать это сообщение в вашем main.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>
И соответствующий 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.info("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.info("moving " + arg + " from " + destinationPath + " to " + sourcePath);
fs.renameSync(destinationPath + "/" + arg, sourcePath + "/" + arg);
});
ipc.on('moveToDestination', (event, arg) => {
console.info("moving " + arg + " from " + sourcePath + " to " + destinationPath);
fs.renameSync(sourcePath + "/" + arg, destinationPath + "/" + arg);
});
});
Мой каталог выглядит следующим образом:
main.js
ui
- index.html
- app.js
fileSource
fileDestination
Это должно помочь вам понять основы того, что вы планируете делать. Если вы все еще не уверены в основах работы с электроном, я рекомендую вам начать с этого.
«Для вашей логики перетаскивания вы можете попробовать следующее: перетащить и оставить Electron или просто использовать любую html / js библиотеку перетаскивания, если она вам нужна только внутри одного окна». как реализовать?