Electron 调用h5的拖放api 结合nodejs fs实现拖放打开文件功能
Electron调用h5的拖放api 结合nodejs fs实现拖放打开文件功能html5拖放api:http://www.runoob.com/jsref/event-ondragover.html
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
var fs=require('fs');
var content=document.querySelector('#content');
content.ondragenter=content.ondragover=content.ondragleave=function(){
return false; /*阻止默认行为*/
}
content.ondrop=function(e){
//阻止默认行为
e.preventDefault();
console.log(e.dataTransfer.files);
var path=e.dataTransfer.files.path;
fs.readFile(path,'utf-8',(err,data)=>{
if(err){
console.log(err);
return false;
}
content.innerHTML=data;
})
}
完整demo:
**** Hidden Message *****
页:
[1]