nw.js如何处理拖放操做

时间 2019-11-11

标签 nw.js 如何处理拖放栏目 JavaScript 繁體版

原文原文链接

nw.js如何处理拖放操做html

其实拖放（drag-drop）操做是Html5的功能，不是nw.js的内置API，那么咱们采用Html5应用通常的处理方法就能够了。node

首先咱们看一下一个正常的页面，直接拖放一个文件过来的效果。chrome

页面代码：浏览器

<html>electron

<head>ide

<title>拖放测试</title>工具

</head>测试

<bodystyle="background-color:rgba(0,0,0,0);">this

<pid="output">spa

</p>

</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>

<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">

<h5>

</h5>

</p>

<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;

};

</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 进行同步，欢迎关注。