调用Html5的拖放api · nodejs

在拖放的过程中会触发以下事件： * **在拖动目标上触发事件**(源元素)**:** * ondragstart - 用户开始拖动元素时触发 * [ondrag](https://www.runoob.com/jsref/event-ondrag.html)\- 元素正在拖动时触发 * [ondragend](https://www.runoob.com/jsref/event-ondragend.html)\- 用户完成元素拖动后触发 * **释放目标时触发的事件:** * [ondragenter](https://www.runoob.com/jsref/event-ondragenter.html)\- 当被鼠标拖动的对象进入其容器范围内时触发此事件 * [ondragover](https://www.runoob.com/jsref/event-ondragover.html)\- 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 * [ondragleave](https://www.runoob.com/jsref/event-ondragleave.html)\- 当被鼠标拖动的对象离开其容器范围内时触发此事件 * [ondrop](https://www.runoob.com/jsref/event-ondrop.html)\- 在一个拖动过程中，释放鼠标键时触发此事件 index.html ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style> .content{ width: 100%; height: 400px; background: orange; overflow-y: auto; } </style> </head> <body> <div class="content" id="content"></div> <script src="renderer/index.js"></script> </body> </html> ``` index.js ``` var fs=require("fs"); var content = document.querySelector('#content'); //阻止以下几个默认行为 content.ondragenter=content.ondragover=content.ondragleave=function(){ return false; } content.ondrop=function(e){ //console.log(e); e.preventDefault();//阻止默认行为 var path=e.dataTransfer.files[0].path; fs.readFile(path,'utf-8',(err,data)=>{ if(err){ console.log(err); return false; } content.innerHTML=data; }) } ``` 方式2 ``` var fs=require("fs"); const content=document.getElemetById("#content"); content.addEventListener("drop"(e)=>{ e.preventDefault(); const files=e.dataTransfer.files; if (files&&files.length>0) { const path=files[0].path; const file_buffer=fs.readFileSync(path); console.log(var file_content=file_buffer.toString()); } }) content.addEventListener("dragover",(e)=>{ e.preventDefault(); }) ```