第14课:Electron 应用中的拖拽操作

如果应用程序需要操作外部文件,通常会使用文件打开对话框选择这个文件,然后交由程序做进一步处理,文件打开对话框会返回一个或多个选择的文件路径。不过更友好的方式是将文件拖动到程序的窗口或某一个区域上,然后同样会返回一个或多个文件给应用程序,这种行为称为拖拽操作。

本节将会通过两个案例介绍如何实现 Electron 应用的拖拽操作。

14.1 拖拽操作:拖放并显示图像

本节将通过一个简单的案例演示如何实现图像文件的拖放操作,本例的主要功能是将一个图像文件拖拽的程序的某个区域,然后在窗口上按等比例显示图像。

下面先看一下本例的效果,首先运行程序,然后找到一个图像文件,将其拖动到窗口上的红色背景区域,如下图所示。

1240

当拖动的图像处在红色背景区域上方时松手,就会在红色区域下方按等比例显示拖动的图像,如下图所示。

1240

Electron 应用拖拽操作本子上是利用了 HTML 的拖拽 API,然后再调用 Electron API 和 Node.js API 再做进一步处理。

拖拽操作要实现下面 2 个核心功能:

  • 窗口的某一个区域接收拖进来的文件;
  • 接收文件后&#x
蒙娜丽宁 CSDN认证博客专家 公众号:极客起源 达芬奇 UM
更多精彩内容请关注微信公众号:「极客起源」,东北大学计算机专业硕士。UnityMarvel创始人,企业内训讲师、IT畅销书作者,CSDN学院讲师,拥有多年软件开发经验和培训经验。主要著作包括《Python从菜鸟到高手》、《Python爬虫技术:深入理解原理、技术与开发》,培训企业学员数千人。制作在线课程数千小时。更多视频课程,请访问我的B站:https://space.bilibili.com/477001733
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值