Электрон js перетаскивание - PullRequest
Новая
       17

Электрон js перетаскивание

1 голос
/ 12 апреля 2020

Я новичок в электронике и хочу работать с функциями перетаскивания. Хотите сбросить файл и получить его расширения. В зависимости от расширения измените что-либо на экране.

т.е. если файл .mp3 был уронен внутрь, нужно изменить backgroundColor на зеленый, а для файла .jpg - красный.

Мне удалось использовать перетаскивание, но не знаю, как правильно обращаться с ним. Пока мой код:
основной. html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body style="color: grey;">
    <div class="character">
      <h1>{nome}</h1>
      <img id="char_anim" src="assets/goku.gif" />
    </div>
  </body>
  <a href="#" id="drag">item</a>
  <script type="text/javascript" charset="utf-8">
    document.getElementById("drag").ondragstart = (event) => {
      event.preventDefault();
      ipcRenderer.send("ondragstart", "/path/to/item");

    };
  </script>
</html>

основной. js

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

const MAIN_HTML = path.join("file://", __dirname, "main.html");
const CHILD_PADDING = 50;

const onAppReady = function () {
  let parent = new BrowserWindow({
    width: 800,
    height: 1200,
    transparent: false,
    frame: true,
  });

  parent.once("close", () => {
    parent = null;
  });

  parent.loadURL(MAIN_HTML);
};

//~ app.on('ready', onAppReady);
app.on("ready", () => setTimeout(onAppReady, 500));

// dragndrop
ipcMain.on("ondragstart", (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: "/path/to/icon.png",
  });
});

I мог бы объяснить больше, но мне просто нужен способ обработать приложение, чтобы узнать, какое расширение имеет этот удаленный файл, и отобразить другое сообщение для одного или другого.

Ответы [ 2 ]

1 голос
/ 12 апреля 2020

В вашем основном процессе вы можете получить расширение файла, используя модуль path: 

let ext = require('path').extname(filePath)

И затем вы можете отправить возвращаемое значение в средство визуализации следующим образом: 

event.sender.send('get-file-extension', ext);

После этого вы можете получить отправленное значение, используя ipcRenderer, чтобы изменить цвет фона: 

ipcRenderer.on('get-file-extension', (event, extension) => {
     if(extension == '.mp3')
          document.body.style.backgroundColor = "green";
     else if(extension == '.jpg')
          document.body.style.backgroundColor = "red";
});
0 голосов
/ 12 апреля 2020

я борюсь. не знаю, где поставить код. index. html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body style="color: grey;">
    <div class="character">
      <h1>{Goku Desbloqueado}</h1>
      <img id="char_anim" src="assets/goku.gif" />
    </div>
  </body>

  <a href="#" id="drag">Arraste para cá.</a>
  <script type="text/javascript" charset="utf-8">
    document.getElementById("drag").ondragstart = (event) => {
      event.preventDefault();
      ipcRenderer.send("ondragstart", "/path/to/item");
    };
  </script>
  <script src="./renderer.js"></script>
</html>

main. js

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
let ext = require("path").extname(filePath);

const MAIN_HTML = path.join("file://", __dirname, "main.html");
const CHILD_PADDING = 50;

const onAppReady = function () {
  let parent = new BrowserWindow({
    width: 800,
    height: 1200,
    transparent: false,
    frame: true,
  });

  parent.once("close", () => {
    parent = null;
  });

  parent.loadURL(MAIN_HTML);
};

//~ app.on('ready', onAppReady);
app.on("ready", () => setTimeout(onAppReady, 500));

// dragndrop
ipcMain.on("ondragstart", (event, filePath) => {
  event.sender.startDrag({
    file: filePath,
    icon: "/path/to/icon.png",
  });
});

ipcRenderer.on("get-file-extension", (event, extension) => {
  if (extension == ".mp3") document.body.style.backgroundColor = "green";
  else if (extension == ".jpg") document.body.style.backgroundColor = "red";
});

renderer.js
const { ipcRenderer } = require("electron");

event.sender.send("get-file-extension", ext);

извините
...