文章/答案/技术大牛

发布

社区首页 >问答首页 >电子拖放

问电子拖放
EN

Stack Overflow用户

提问于 2020-04-12 15:02:54

回答 1查看 421关注 0票数 1

我是电子新手，想要处理拖放功能。想要删除一个文件并获得其扩展名。根据扩展更改屏幕上的内容。

也就是说，如果一个.mp3文件被删除在里面，希望将backgroundColor更改为绿色，并将.jpg文件更改为红色。

我成功地使用了拖放，但不知道如何正确处理它。到目前为止我的代码是：

main.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>

main.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",
  });
});

我可以解释更多，但我只是需要一种方法来处理应用程序，知道哪个扩展名有这个被丢弃的文件，并显示一个或另一个不同的消息。

javascript

drag-and-drop

electron

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-12 15:15:07

在您的主要进程中，您可以使用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";
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61173494

复制

相似问题

问电子拖放
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子拖放EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问电子拖放
EN