技术教程 编程教程 nw.js如何处理拖放操作 正文

nw.js如何处理拖放操作

2023-05-29,,

<!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:宋体;
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:黑体;
panose-1:2 1 6 9 6 1 1 1 1 1;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Cambria;
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:楷体;
panose-1:2 1 6 9 6 1 1 1 1 1;}
@font-face
{font-family:新宋体;
panose-1:2 1 6 9 3 1 1 1 1 1;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
@font-face
{font-family:"\@宋体";
panose-1:2 1 6 0 3 1 1 1 1 1;}
@font-face
{font-family:"\@楷体";
panose-1:2 1 6 9 6 1 1 1 1 1;}
@font-face
{font-family:"\@黑体";
panose-1:2 1 6 9 6 1 1 1 1 1;}
@font-face
{font-family:"\@新宋体";
panose-1:2 1 6 9 3 1 1 1 1 1;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
text-indent:21.0pt;
line-height:150%;
font-size:10.5pt;
font-family:"Times New Roman",serif;}

h3
{mso-style-link:"标题 3 Char";
margin-top:13.0pt;
margin-right:0cm;
margin-bottom:13.0pt;
margin-left:0cm;
text-indent:21.0pt;
line-height:173%;
page-break-after:avoid;
font-size:15.0pt;
font-family:"Times New Roman",serif;
font-weight:normal;}
h4
{mso-style-link:"标题 4 Char";
margin-top:14.0pt;
margin-right:0cm;
margin-bottom:14.5pt;
margin-left:0cm;
line-height:156%;
page-break-after:avoid;
font-size:14.0pt;
font-family:"Times New Roman",serif;
font-weight:normal;}
h5
{mso-style-link:"标题 5 Char";
margin-top:14.0pt;
margin-right:0cm;
margin-bottom:14.5pt;
margin-left:0cm;
line-height:156%;
page-break-after:avoid;
font-size:14.0pt;
font-family:"Times New Roman",serif;
font-weight:bold;}
h6
{mso-style-link:"标题 6 Char";
margin-right:0cm;
margin-left:0cm;
font-size:7.5pt;
font-family:宋体;
color:black;
font-weight:bold;}
p.MsoHeading7, li.MsoHeading7, div.MsoHeading7
{mso-style-link:"标题 7 Char";
margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.2pt;
margin-left:0cm;
text-indent:21.0pt;
line-height:133%;
page-break-after:avoid;
font-size:12.0pt;
font-family:"Times New Roman",serif;
font-weight:bold;}
p.MsoFootnoteText, li.MsoFootnoteText, div.MsoFootnoteText
{mso-style-link:"脚注文本 Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Calibri",sans-serif;}
p.MsoHeader, li.MsoHeader, div.MsoHeader
{mso-style-link:"页眉 Char";
margin:0cm;
margin-bottom:.0001pt;
text-align:center;
text-indent:21.0pt;
line-height:150%;
layout-grid-mode:char;
border:none;
padding:0cm;
font-size:9.0pt;
font-family:"Times New Roman",serif;}
p.MsoFooter, li.MsoFooter, div.MsoFooter
{mso-style-link:"页脚 Char";
margin:0cm;
margin-bottom:.0001pt;
text-indent:21.0pt;
line-height:150%;
layout-grid-mode:char;
font-size:9.0pt;
font-family:"Times New Roman",serif;}
p.MsoTitle, li.MsoTitle, div.MsoTitle
{mso-style-link:"标题 Char";
margin-top:12.0pt;
margin-right:0cm;
margin-bottom:3.0pt;
margin-left:0cm;
text-align:center;
font-size:16.0pt;
font-family:"Cambria",serif;
font-weight:bold;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p
{margin-right:0cm;
margin-left:0cm;
font-size:12.0pt;
font-family:宋体;}
pre
{mso-style-link:"HTML 预设格式 Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:宋体;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{mso-style-link:"批注框文本 Char";
margin:0cm;
margin-bottom:.0001pt;
text-indent:21.0pt;
font-size:9.0pt;
font-family:"Times New Roman",serif;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-link:"列出段落 Char";
margin-right:0cm;
margin-left:0cm;
text-indent:21.0pt;
line-height:150%;
font-size:12.0pt;
font-family:宋体;}
p.MsoIntenseQuote, li.MsoIntenseQuote, div.MsoIntenseQuote
{mso-style-link:"明显引用 Char";
margin-top:18.0pt;
margin-right:43.2pt;
margin-bottom:18.0pt;
margin-left:43.2pt;
text-align:center;
text-indent:21.0pt;
line-height:150%;
border:none;
padding:0cm;
font-size:10.5pt;
font-family:"Times New Roman",serif;
color:#4F81BD;
font-style:italic;}
span.MsoSubtleEmphasis
{font-family:宋体;
color:gray;
font-style:italic;}
p.MsoTocHeading, li.MsoTocHeading, div.MsoTocHeading
{margin-top:24.0pt;
margin-right:0cm;
margin-bottom:0cm;
margin-left:0cm;
margin-bottom:.0001pt;
line-height:115%;
page-break-after:avoid;
font-size:14.0pt;
font-family:"Cambria",serif;
color:#365F91;}
span.Char
{mso-style-name:"页眉 Char";
mso-style-link:页眉;}
span.Char0
{mso-style-name:"页脚 Char";
mso-style-link:页脚;}
span.1Char
{mso-style-name:"标题 1 Char";
mso-style-link:"标题 1";
font-family:"Times New Roman",serif;}
span.2Char
{mso-style-name:"标题 2 Char";
mso-style-link:"标题 2";
font-family:"Times New Roman",serif;}
span.3Char
{mso-style-name:"标题 3 Char";
mso-style-link:"标题 3";
font-family:"Times New Roman",serif;}
span.4Char
{mso-style-name:"标题 4 Char";
mso-style-link:"标题 4";
font-family:"Times New Roman",serif;}
span.5Char
{mso-style-name:"标题 5 Char";
mso-style-link:"标题 5";
font-family:"Times New Roman",serif;
font-weight:bold;}
span.6Char
{mso-style-name:"标题 6 Char";
mso-style-link:"标题 6";
font-family:宋体;
color:black;
font-weight:bold;}
span.7Char
{mso-style-name:"标题 7 Char";
mso-style-link:"标题 7";
font-family:"Times New Roman",serif;
font-weight:bold;}
span.Char1
{mso-style-name:"标题 Char";
mso-style-link:标题;
font-family:"Cambria",serif;
font-weight:bold;}
span.Char2
{mso-style-name:"列出段落 Char";
mso-style-link:列出段落;
font-family:宋体;}
p.a, li.a, div.a
{mso-style-name:项目符号;
mso-style-link:"项目符号 Char";
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:39.3pt;
margin-bottom:.0001pt;
text-align:justify;
text-justify:inter-ideograph;
text-indent:0cm;
line-height:150%;
font-size:12.0pt;
font-family:宋体;}
span.Char3
{mso-style-name:"项目符号 Char";
mso-style-link:项目符号;
font-family:宋体;}
p.a0, li.a0, div.a0
{mso-style-name:编号;
mso-style-link:"编号 Char";
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:69.0pt;
margin-bottom:.0001pt;
text-indent:0cm;
line-height:150%;
font-size:10.5pt;
font-family:"Times New Roman",serif;}
span.Char4
{mso-style-name:"编号 Char";
mso-style-link:编号;
font-family:"Times New Roman",serif;}
p.a1, li.a1, div.a1
{mso-style-name:图题;
mso-style-link:"图题 Char";
margin:0cm;
margin-bottom:.0001pt;
text-align:center;
text-indent:21.0pt;
line-height:150%;
font-size:10.5pt;
font-family:"Times New Roman",serif;}
span.Char5
{mso-style-name:"图题 Char";
mso-style-link:图题;
font-family:"Times New Roman",serif;}
p.a2, li.a2, div.a2
{mso-style-name:注意;
mso-style-link:"注意 Char";
margin:0cm;
margin-bottom:.0001pt;
line-height:150%;
border:none;
padding:0cm;
font-size:10.5pt;
font-family:"Times New Roman",serif;}
span.Char6
{mso-style-name:"注意 Char";
mso-style-link:注意;
font-family:"Times New Roman",serif;}
p.a3, li.a3, div.a3
{mso-style-name:代码清单;
mso-style-link:"代码清单 Char";
margin-top:0cm;
margin-right:28.65pt;
margin-bottom:0cm;
margin-left:0cm;
margin-bottom:.0001pt;
text-indent:18.4pt;
line-height:12.0pt;
background:#F0F7FE;
border:none;
padding:0cm;
font-size:10.5pt;
font-family:"Courier New";
color:#333333;}
span.Char7
{mso-style-name:"代码清单 Char";
mso-style-link:代码清单;
font-family:"Courier New";
color:#333333;
background:#F0F7FE;}
p.DecimalAligned, li.DecimalAligned, div.DecimalAligned
{mso-style-name:"Decimal Aligned";
margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
span.Char8
{mso-style-name:"脚注文本 Char";
mso-style-link:脚注文本;}
span.Char9
{mso-style-name:"批注框文本 Char";
mso-style-link:批注框文本;
font-family:"Times New Roman",serif;}
p.a6, li.a6, div.a6
{mso-style-name:a6;
margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:宋体;}
p.aff5, li.aff5, div.aff5
{mso-style-name:aff5;
margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:宋体;}
span.50
{mso-style-name:50;}
p.340505, li.340505, div.340505
{mso-style-name:340505;
margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:宋体;}
p.111, li.111, div.111
{mso-style-name:111;
margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:宋体;}
span.5k
{mso-style-name:5k;}
span.HTMLChar
{mso-style-name:"HTML 预设格式 Char";
mso-style-link:"HTML 预设格式";
font-family:宋体;}
p.Code, li.Code, div.Code
{mso-style-name:"Code\,C";
margin-top:0cm;
margin-right:0cm;
margin-bottom:6.0pt;
margin-left:25.0pt;
font-size:8.0pt;
font-family:"Courier New";}
span.z-Char
{mso-style-name:"z-窗体顶端 Char";
mso-style-link:z-窗体顶端;
font-family:"Arial",sans-serif;
display:none;}
span.z-Char1
{mso-style-name:"z-窗体顶端 Char1";
font-family:"Arial",sans-serif;
display:none;}
span.z-Char0
{mso-style-name:"z-窗体底端 Char";
mso-style-link:z-窗体底端;
font-family:"Arial",sans-serif;
display:none;}
span.z-Char10
{mso-style-name:"z-窗体底端 Char1";
font-family:"Arial",sans-serif;
display:none;}
span.sentence
{mso-style-name:sentence;}
span.Chara
{mso-style-name:"明显引用 Char";
mso-style-link:明显引用;
font-family:"Times New Roman",serif;
color:#4F81BD;
font-style:italic;}
span.pl-s1
{mso-style-name:pl-s1;}
span.pl-en
{mso-style-name:pl-en;}
span.pl-c1
{mso-style-name:pl-c1;}
span.pl-k
{mso-style-name:pl-k;}
span.pl-smi
{mso-style-name:pl-smi;}
.MsoChpDefault
{font-family:"Calibri",sans-serif;}
/* Page Definitions */
@page WordSection1
{size:595.3pt 841.9pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
layout-grid:15.6pt;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
-->

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，关于文件拖放就给大家介绍到这里，有问题可以留言。。

所有文章会在本人的博客玄魂 - 博客园
和个人公众号 “xuanhun521” http://t.cn/R4OCglP
‘’微博http://weibo.com/xuanhun ，知乎专栏http://zhuanlan.zhihu.com/xuanhun 进行同步，欢迎关注。

nw.js如何处理拖放操作的相关教程结束。

《nw.js如何处理拖放操作.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!