Javascript--dataTransfer

【Javascript--dataTransfer】的更多相关文章

你想的到想不到的 javascript 应用小技巧方法

javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x…

javascript小技巧

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.act…

Javascript快速入门(下篇)

Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构如下图所示. XMLHttpRequest对象:这个是Ajax的核心对象,其让Javascript构建的HTTP请求并提交给服务器,这样页面就能以异步方式在后台产生请求,让用户可以继续使用这个页面,而不必等待浏览器刷新或加载新的页面.接下来通过一个表格对XMLHttpRequest对象有个总体的了解…

【温故而知新-Javascript】使用拖放

HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正如将要看到的,它能跨浏览器工作. 1. 创建来源项目我们通过 draggable属性告诉浏览器文档里的哪些元素可以被拖动.这个值有三个允许的值: 它的默认值是auto,即把决定权交给浏览器,通常来说这就意味着所有元素默认都是可拖动的,我们必须显示设置draggable 属性为false 来禁止拖动…

使用 JavaScript File API 实现文件上传

概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相同…

javascript小技巧(非常全)

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.act…

读javascript高级程序设计12-HTML5脚本编程

一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性,如果发现域不匹配则不会进行操作. 2.接收消息接收到消息时,会触发window对象的message事件.传递给onmessage事件处理程序的对象主要包含三个信息: data:对应postMessage()第一个参数传入的内容: origin:发送消息的文档所在域.接收到消息后,检测消息来源是非常…

JavaScript事件大全3

//无模式的提示框 //屏蔽按键 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <noscript><meta http-equiv="refresh" content="0;url=about:noscript"></noscri…

javascript高级编程运用

一//各种尺寸 (size) s += “\r\n网页可见区域宽:“+ document.body.clientWidth; s += “\r\n网页可见区域高:“+ document.body.clientHeight; s += “\r\n网页可见区域高:“+ document.body.offsetWeight +” (包括边线的宽)“; s += “\r\n网页可见区域高:“+ document.body.offsetHeight +” (包括边线的宽)“; s += “\r\n网页正文…

JavaScript操作DOM的那些坑

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口特性/方法类型/返回类型说明 nodeName String 节点的名字:根据节点的类型而定义 nodeValue String…

《JavaScript高级程序设计》心得笔记-----第四篇章

第十六章 1. 跨文档消息传送: postMessage("消息", "发送消息的文档所在域") 2. 拖放事件: 1) 拖动某元素会依次触发:dragstart.drag.dragend 2) 当某个元素被拖动到一个有效的放置目标上时,会依次发生:dragenter. dragover.dragleave 或 drop 3) 自定义放置目标:重写dragenter.dragover 4) dataTransfer(在拖放操作时实现数据交换):…

javascript技巧合集

转http://www.blogjava.net/zhaochengming/archive/2010/04/09/317837.html http://www.cnblogs.com/fxgachiever/archive/2010/09/08/1821717.html 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releas…

JavaScript高级程序设计58.pdf

15章使用Canvas绘图略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作跨文档消息传递简称XDM,指来自不同域的页面间传递消息(比如www.wrox.com域中页面与p2p.wrox.com) XDM的核心是postMessage()方法,目的是向另一个地方传递信息,“另一个地方”指的是包含在当前页面中的<iframe>元素或者当前页面弹出的窗口 postMessage()方法接收2个参数:一条消息和一个…

每天一个JavaScript实例-html5拖拽

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-html5拖拽</title> <style> #drop{ width:300px; height:200px; background-…

JavaScript怎么上传图片

JavaScript怎么上传图片在XMLHttpRequest Level2出台之前,大多数的异步上传图片都是利用iframe去实现的. 至于具体的实现细节,我就不在这边啰嗦的,Google一下就有文章谈这个东西. 这次主要说说,怎么用新的API去实现图片上传. 首先,少不了的自然是XMLHttpRequest Level2的一些新特性啦. 其中最为实在的就是FormData对象,直接把表单(form)的Dom对象转为FormData对象,然后向服务器发送. 还有就是Progress事件的支持…

javascript技巧大全套

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.ac…

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访…

《JAVASCRIPT高级程序设计》原生拖放和媒体元素

一.原生拖放最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的内容: 1.拖放事件在拖放事件中,将依次在被拖动的元素和作为放置目标的元素上触发3个事件: 被拖动的元素:dragstart----drag----dragend 作为放置目标的元素:dragenter----dragover---dragleave(元素被拖出了目标)或drop(元素被放到了放置…

用javascript实现base64编码器

前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用js实现base64编码器的过程原理 Base-64编码可以将任意一组字节转换成较长的常见文本字符序列,从而可以合法地作为首部字段值.Base-64编码将用户输入或二进制数据,打包成一种安全格式,将其作为HTTP首部字段的值发送出去,而无须担心其中包含会破坏HTTP分析程序的冒号.换行符或二进制值…

全栈必备 JavaScript基础

1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaScript 排第一,Java 第二,Python 反超 PHP 排第三,PHP 第四,C# 和 C++ 并列第五.RedMonk 排名的主要依旧是各种编程语言在 Stack Overflow 和 GitHub 上的表现,比如编程语言在 Stack Overflow 上的讨论数量,在 GitHub 上的代码量等.尽管有一定的片面性,还是说明了JavaSc…

JavaScript一个拖动元素的实例

【javascript】谈谈HTML5 ——HTML兽进化， H5兽！

作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它打个比方:<海贼王>中的主角路飞在“顶上战争两年前”,会在一些危急关头“不经意”地使用霸王色霸气,但对”霸气“的结构体系和具体运用都不太了解,这让他在香波地群岛等诸多重大战役中大吃苦头.此后, 他不惜花费两年时间跟随雷利修炼霸气.因为,如果不去了解这个崭新的战斗方法的话,他们在残酷的新世界一天也生存不了. 为什么学习HTML5?…

JavaScript原生拖放API入门总结

一.背景最早实现JavaScript拖放功能的是IE4的浏览器了.在当时,网页中只有图像和文本才能够进行拖放.IE5之后,拖放功能得到了扩展,形成了一个API(应用程序编程接口),使得几乎任何的标签元素都可以实现拖放. HTML5为拖放制定了规范,firefox3.5.safari3+和chrome也根据这个规范实现了拖放功能.一说起拖放,几乎在任何应用框架窗口内,都可以拖放网页元素,浏览器对拖放功能的支持也提供了便利. 二.拖放事件通过拖放事件,可以控制拖放的各方面.首先要确定哪里发生了拖…

【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它打个比方:<海贼王>中的主角路飞在“顶上战争两年前”,会在一些危急关头“不经意”地使用霸王色霸气,但对”霸气“的结构体系和具体运用都不太了解,这让他在香波地群岛等诸多重大战役中大吃苦头.此后, 他不惜花费两年时间跟随雷利修炼霸气.因为,如果不去了解这个崭新的战斗方法的话,他们在残酷的新世界一天也生存不了. 为什么学习HTM…

Javascript 高级程序设计--总结【四】

******************************* Chapter 11 DOM扩展 ******************************* 主要的扩展是选择符API 和 HTML5 选择符API: document.querySelector('.img'); document.querySelector('#test'); document.querySelectorAll('a'); //这个方式浏览器支持很少,返回是否可以查询得到的结果 document.mat…

dataTransfer对象

HTML5拖拽的数据传输虽然通过dragstart.drag和dragend事件实现了原生拖拽.但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换.为了实现数据的交换,IE5引入了dataTransfer对象.dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据.因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象.在事件处理程序中,可以使用这个对象的属性和方法来完善拖放功能. dat…

javaScript+html5实现图片拖拽

源码: <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>html5拖拽效果</title> <style> #d1 { width: 400px; height: 400px; border: solid black 1px; float: left;; } #d2 { width: 400px; height: 400px; bor…

【MarkMark学习笔记学习笔记】javascript/js 学习笔记

1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作符)都是区分大小写的. 3.2, 3.3, 3.4, 3.5, typeof 用于基本类型的判别,instanceof用于引用类型(Object类型)的判别. 3.6, 3.7, 3.8,Boolean类型有两个取值:true 和 false(区分大小写).使用Boolean()函数如下:注意,除n…

(网页)javascript小技巧(非常全)

事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode event.shiftKey event.altKey event.ctrlKey 事件返回值 event.returnValue 鼠标位置 event.x event.y 窗体活动元素 document.act…

javascript实现拖曳与拖放图片

javascript实现拖曳与拖放图片其实对于drag和drop拖曳与拖放事件IE很早以前就支持这个操作了,我们先来看看HTML5中新增的拖放API. 在HTML5中想要实现拖放操作,至少要做以下操作: 1. 将要拖放的对象元素的draggable属性设置为true,即(draggable="true"),这样才能拖放该元素,且img元素与a元素(必须指定href)默认允许拖放操作.如代码: <li draggable="true">Item 1<…