专栏首页玄魂工作室nw.js如何处理拖放操作

nw.js如何处理拖放操作

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;

};

本文分享自微信公众号 - 玄魂工作室(xuanhun521),作者:玄魂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【长文】javascript 和上帝

    嗯,你看懂了吗?

    用户1631416
  • Kali Linux Web渗透测试手册(第二版) - 6.7 - 利用XML外部实体注入

    thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt

    用户1631416
  • Kali Linux Web渗透测试手册(第二版) - 8.0+8.1+8.2 - 介绍+用Nikto进行扫描+自动扫描注意事项

    thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt

    用户1631416
  • 设计模式之规格模式

    规格模式已经是一个非常具体的应用框架了, 遇到类似多个对象中筛选查找, 或者业务规则不适于放在任何已有实体或值对象中, 而且规则的变化和组合会掩盖那些领域对象的...

    烟草的香味
  • 15个案例,看大数据与政府服务领域的激情碰撞!

    随着大数据技术和商业模式的进一步成熟,市场焦点迅速地从概念炒作向实际应用转移,越来越多的成功案例相继在不同的领域中涌现,大数据应用逐渐落地生根。 目前,应用大数...

    灯塔大数据
  • JavaScript设计模式(2)——Module(模块)模式

    对象字面量表示法中,一个对象被描述为一组包含在大括号({})中,以逗号分割的name/value对。 对象内的名称可以是字符串或者标识符,用冒号结尾。 最后...

    悠扬前奏
  • PhantomJS 基础及示例

    PhantomJS 是一个无界面的 webkit 内核浏览器,你可以把它当作一个没有界面的 Safari 。本文介绍了一些相关的基础知识。

    腾讯IVWEB团队
  • PhantomJS基础及示例

    概述 PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast...

    IMWeb前端团队
  • PhantomJS基础及示例

    PhantomJS是一个无界面的webkit内核浏览器,你可以把它当作一个没有界面的Safari。

    IMWeb前端团队
  • 微信小程序正式发布官方视觉组件库!

    知晓君

扫码关注云+社区

领取腾讯云代金券