这次我们来实时一个功能 - 拖拽打开/显示文件内容。例：在文件夹窗口将package.json文件拖拽至我们的应用程序，即可在指定框里显示该文件内容。就如同将某个文件拖拽至记事本，记事本即显示该文件内容。
本例通过调用H5文档里拖拽的API来实现。
一、index.html增加div框
修改内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<script src="renderer/drag.js"></script>
</head>
<body>
<h2></h2>
<div class="content" id="content"></div>
</body>
</html>
- div content即将要显示文件内容
- drag.js为实现本例的脚本
二、drag.js脚本实现
- 拖拽事件为ondrop
- 在ondrop事件里，通过访问dataTransfer.file[0].path，获得路径和文件名
- 通过上述路径和文件名，将文件内容在div框内显示
在下面网站可以查到常见的拖拽事件
https://www.w3cschool.cn/jsref/event-ondrag.html
截屏2022-02-13 下午7.02.06.png
/*
该脚本用于实现拖拽打开文件的效果
https://www.w3cschool.cn/jsref/event-ondrag.html
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
*/
const fs = require("fs");
window.onload=()=> {
var contentDom = document.querySelector("#content");
//阻止相关事件默认行为
contentDom.ondragcenter = contentDom.ondragover = contentDom.ondragleave = ()=>{
return false;
}
//对拖动释放事件进行处理
contentDom.ondrop=(e)=> {
//console.log(e);
var filePath = e.dataTransfer.files[0].path
console.log(filePath);
fs.readFile(filePath,(err,data)=>{
if (err) {
console(err);
return;
}
contentDom.innerHTML = data.toString();
})
}
}
三、最终效果
如图所示：
截屏2022-02-12 下午10.14.25.png
最后更新日期：2022年2月13日
网友评论