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檔案，就是下面的效果：
上面示範的就是針對不同的檔案做不同的處理。這裡面涉及到的知識點，一個是擷取檔案的資訊，主要是路徑；第二是的檔案的讀取、儲存和進一步處理。
下面我們修改一下上面的代碼：
<title>拖放測試 </title>
<style>
#holder {
border: 10pxdashed#ccc;
width: 300px;
height: 300px;
margin: 20pxauto;
}
#holder.hover {
border: 10pxdashed#333;
}
</style>
<h5>
</h5>
<divid="holder"></div>
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;
};
效果如下：
我們建立了一個div來處理檔案拖放。
holder.ondrop = function (e) {
上面代碼通過回調中的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 進行同步，歡迎關注。
作者：玄魂
出處：http://www.cnblogs.com/xuanhun/
原文連結：http://www.cnblogs.com/xuanhun/
更多内容，請通路我的個人站點 對程式設計，安全感興趣的，加qq群：hacking-1群：303242737，hacking-2群：147098303，nw.js，electron交流群 313717550。
本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。
關注我：