nw.js如何處理拖放操作
其實拖放（drag-drop）操作是Html5的功能，不是nw.js的內置API，那么我們采用Html5應用一般的處理方法就可以了。
首先我們看一下一個正常的頁面，直接拖放一個文件過來的效果。
頁面代碼：
<html>
<head>
<title>拖放測試</title>
</head>
<bodystyle="background-color:rgba(0,0,0,0);">
<pid="output">
<h1>拖放測試</h1>
</p>
<script>
</script>
</body>
</html>
如下圖：
下面我們拖拽一張圖片過來。
nw.js會按照chrome瀏覽器默認處理文件的方式來處理拖放的文件，能顯示的會直接顯示，不能顯示的會變成資源下載。
這肯定不是桌面應用想要的效果，那么Html5是如何處理拖放的呢？
1.1 如何禁用拖放操作
在Html元素上，我們可以通過ondragover和ondrop兩個事件來處理文件拖放，那么和阻止其他事件行為的方法一樣，我們只需要進行監聽並阻止冒泡就可以了。
在頁面中添加下面的代碼：
window.ondragover=function(e) { e.preventDefault(); returnfalse };
window.ondrop=function(e) { e.preventDefault(); returnfalse };
再次測試。
然后，然后就沒有然后了。程序不會做任何反應。
1.2 如何獲取拖放的文件信息並處理
我們的應用如果是可以處理某種類型的文件的話，我們是希望程序以自己的方式來處理文件的，比如演示文檔的編輯工具AxeSlide，如果直接拖放多媒體文件就會變成畫布內的編譯元素，如果是dbk文件就是打開文件進行全新的編輯。
如果是Dbk文件，就是下面的效果：
上面演示的就是針對不同的文件做不同的處理。這里面涉及到的知識點，一個是獲取文件的信息，主要是路徑；第二是的文件的讀取、保存和進一步處理。
下面我們修改一下上面的代碼：
<html>
<head>
<title>拖放測試 </title>
<style>
#holder {
border: 10pxdashed#ccc;
width: 300px;
height: 300px;
margin: 20pxauto;
}
#holder.hover {
border: 10pxdashed#333;
}
</style>
</head>
<bodystyle="background-color:rgba(0,0,0,0);">
<pid="output">
<h1>拖放測試</h1>
<h5>
</h5>
</p>
<divid="holder"></div>
<script>
window.ondragover = function (e) { e.preventDefault(); returnfalse };
window.ondrop = function (e) { e.preventDefault(); returnfalse };
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; returnfalse; };
holder.ondragleave = function () { this.className = ''; returnfalse; };
var h5 = document.querySelector("h5");
holder.ondrop = function (e) {
e.preventDefault();
for (var i = 0; i < e.dataTransfer.files.length; ++i) {
h5.textContent+=e.dataTransfer.files[i].path;
}
returnfalse;
};
</script>
</body>
</html>
效果如下：
我們新建了一個div來處理文件拖放。
holder.ondrop = function (e) {
e.preventDefault();
for (var i = 0; i < e.dataTransfer.files.length; ++i) {
h5.textContent+=e.dataTransfer.files[i].path;
}
returnfalse;
};
上面代碼通過回調中的dataTransfer.files來獲取文件信息。
接下來我們可以通過nodejs的文件操作來通過路徑讀取文件了，這里就不進一步展開了。不過通過Html的FileReader對象也是可以獲取文件數據的，例如：
holder.ondrop=function (e) {
e.preventDefault();
var file = e.dataTransfer.files[0],
reader =newFileReader();
reader.onload=function (event) {
console.log(event.target);
};
console.log(file);
reader.readAsDataURL(file);
returnfalse;
};
ok，關於文件拖放就給大家介紹到這里，有問題可以留言。nw.js，electron交流群 313717550。
所有文章會在本人的博客 玄魂 - 博客園 和個人公眾號 “xuanhun521” http://t.cn/R4OCglP ‘’微博 http://weibo.com/xuanhun ，知乎專欄 http://zhuanlan.zhihu.com/xuanhun 進行同步，歡迎關注。