調用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(); }) ```