H5培训图文.ppt

MobileSoftwareExpert Html5培训 什么是Html5 Html5的前景Html5新特性JavaScript基础Node jsHtml5视频音频Html5WebRTC HTML5 目录 Html5Canvas特性Html5表单元素Html5Css3Html5SvgHtml5Web存储Html5离线存储Html5cache HTML5 Html5webworkersHtml5webSocketHtml5拖拽Html5常见的APIHtml5存在的局限Html5与phoneGap HTML5 什么是HTML5 HTML5 官方概念 HTML5草案的前身名为WebApplications1 0 是HTML4的更新加强版本 它增加了新的标签和属性 强化了网页的标准 w3c等 语义化 图像表达能力和交互效果 广义概念 HTML5代表浏览器端技术的一个发展阶段 在这个阶段 浏览器呈现技术得到了一个飞跃发展和广泛支持 这些技术包括 HTML5 DOM3 CSS3 JSAPI SVG WebGL 3D 等简单概括 hmt5其实就是html css以及jsAPIs的整合 也即Html5 html css jsApis HTML CSS JSAPIs 它是如何起步的 HTML5是下一代的HTML HTML5将成为HTML XHTML以及HTMLDOM的新标准 HTML的上一个版本诞生于1999年 自从那以后 Web世界已经经历了巨变 HTML5仍处于完善之中 然而 大部分现代浏览器已经具备了某些HTML5支持 HTML5 HTML5 HTML5 HTML5建立的一些规则 新特性应该基于HTML CSS DOM以及JavaScript 减少对外部插件的需求 比如Flash 更优秀的错误处理 更多取代脚本的标记 HTML5应该独立于设备 开发进程应对公众透明 HTML5 HTML5前景 1 将会被广泛运用于商业应用2 将会被普及于各大平台 windows mac ios android等 3 各种HTML5游戏的开发层出不穷4 互联网产品的更新换代的技术依托5 可扩展性强 浏览器支持 HTML5 HTML5的新特性 HTML5 媒体支持 Video和Audio画布元素 Canvas以及WebGL视频加速增强的表单Form更炫的平面动画 CSS3页面渲染及CSS33D矢量支持 SVGHTML5的图形机制比较 SVGvsCanvas离线应用原生的拖拽其他HTML5特性 JS基础 JavaScript简介概括地说 JavaScript就是一种基于对象和事件驱动 并具有安全性能的脚本语言 脚本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言 而不需要服务器的处理和响应 当然JavaScript也可以做到与服务器的交互响应 而且功能也很强大 对象和事件是JavaScript的两个核心 将JavaScript插入网页的方法JavaScript可以被嵌入到HTML文件中 不需要经过Web服务器就可以对用户操作作出响应 使用标签在网页中插入Javascript代码 JS基础 JavaScript使用document write来输出内容 将会输出在网页上输出 HelloWorld 代码如下 document write HelloWorld 将js代码嵌入到html页面 JS基础 JavaScript运算下面举例讲述c a b的例子 计算a b的和vara 5 给变量a赋值varb 5 给变量b赋值varc a b c为a b的和document write c 输出c的值执行结果 10 JS基础 JavaScript弹出框JavaScript中有三种弹出框 警告 alert 确认 confirm 以及提问 prompt 1 警告 alert 下面的代码是一段使用alert的实例 alert 我是菜鸟我怕谁 2 确认 confirm 下面代码为例 varr confirm 你是菜鸟吗 if r true document write 彼此彼此 JS基础 3 提问 prompt prompt和confirm类似 不过它允许访客随意输入回答 functionjudge varscore 分数vardegree 分数等级score prompt 你的分数是多少 if score 100 degree 耍我 100分满 JS基础 JavaScript函数函数举例 functionadd2 sum 1 1 alert sum 那么这个函数怎么调用呢 JS基础 functionadd2 sum 1 1 alert sum JS基础 JavaScript事件 点击事件 onclick调用函数 鼠标经过 移出事件 鼠标滑过调用函数鼠标移出调用函数 更多事件 JS基础 JavaScript对象化编程1 常见的基本对象有String字符串对象 Array数组对象 Math 数学 对象 Date对象 这些对象会有各自的方法 2 全局对象 全局对象就是一些全局函数 他们可以直接用 这里对它们进行简要的介绍 3 文档对象文档对象是指在网页文档里划分出来的对象 在JavaScript能够涉及的范围内有如下几个 大 对象 window document location navigator screen history等 下面是一个文档对象树 varname document getElementById UserName 通过id获取值 JS基础 1 navigatornavigator浏览器对象反映了当前使用的浏览器的资料 2 screenscreen屏幕对象反映了当前用户的屏幕设置 3 windowwindow窗口对象是最大的对象 它描述的是一个浏览器窗口 一般要引用它的属性和方法时 不需要用 window xxx 这种形式 而直接使用 xxx 一个框架页面也是一个窗口 如window location href window open window close 4 historyhistory历史对象指浏览器的浏览历史 1 navigator JS基础 5 locationlocation地址对象描述的是某一个窗口对象所打开的地址 要表示当前窗口的地址 只需要使用 location 就行了 若要表示某一个窗口的地址 就使用 location 如window location 6 documentdocument文档对象描述当前窗口或指定窗口对象的文档 它包含了文档从到的内容 用法 document 当前窗口 或 document 指定窗口 如document write document open document close 7 anchors links Linkanchors links Link连接对象 用法 document anchors x document links x 1 Node js 它是什么 Node js事实上就是另外一种上下文 它允许在后端 脱离浏览器环境 运行JavaScript代码 要实现在后台运行JavaScript代码 代码需要先被解释然后正确的执行 Node js的原理正是如此 它使用了Google的V8虚拟机 Google的Chrome浏览器使用的JavaScript执行环境 来解释和执行JavaScript代码 要使用Node js 首先需要进行安装 关于如何安装Node js 这里就不赘述了 可以直接参考官方的安装指南 Node js Helloworld实例打开编辑器 创建一个helloworld js文件 我们要做就是向STDOUT输出 HelloWorld 如下是实现该功能的代码 console log HelloWorld 保存该文件 并通过Node js来执行 命令行 nodehelloworld js在终端输出HelloWorld node机制的根本原理是多利用CPU 高速缓存处理相应访问 减少比如像硬盘到内存 或到高速缓存中的检索读取的等待时间 Node js 一个基础的HTTP服务器我们从服务器模块开始 在你的项目的根目录下创建一个叫server js的文件 并写入以下代码 varhttp require http http createServer function request response response writeHead 200 Content Type text plain response write HelloWorld response end listen 8888 我们来运行并且测试这段代码 首先 用Node js执行你的脚本 nodeserver js接下来 打开浏览器访问http localhost 8888 你会看到一个写着 HelloWorld 的网页 Node js Node js采用事件驱动 异步编程 为网络服务而设计Node js的另一个特点是它支持的编程语言是Javascript 关于动态语言和静态语言的优缺点比较在这里不再展开讨论 只说三点 Javascript作为前端工程师的主力语言 在技术社区中有相当的号召力 而且 随着Web技术的不断发展 特别是前端的重要性增加 不少前端工程师开始试水 后台应用 在许多采用Node js的企业中 工程师都表示因为习惯了Javascript 所以选择Node js Javascript的匿名函数和闭包特性非常适合事件驱动 异步编程 从helloworld例子中我们可以看到回调函数采用了匿名函数的形式来实现 很方便 闭包的作用则更大 看下面的代码示例 varhostRequest http request requestOptions function response varresponseHTML response on data function chunk responseHTML responseHTML chunk response on end function console log responseHTML dosomethinguseful 在上面的代码中 我们需要在end事件中处理responseHTML变量 由于Javascript的闭包特性 我们可以在两个回调函数之外定义responseHTML变量 然后在data事件对应的回调函数中不断修改其值 并最终在end事件中访问处理 HTML5视频音频 我们来看一个应用场景 视频聊天 Googlehtml5视频聊天功能 视频聊天 Googlehtml5视频聊天采用了html5中的视频和音频技术 依托于webRTC网络视频音频服务 HTML5视频音频 AudioVideo WebRTC标签定义视频 比如电影片段或其他视频流 标签定义声音 比如音乐或其他音频流 WebRTC WebReal TimeCommunication 是应用在视频会议 实时广播 多方会谈 点对点应用程序等等的新的协议与API 用navigator getUserMedia启动用户计算机的摄影机 用PeerConnection进行点对点传输等等 HTML5视频音频 video如何工作video元素允许多个source元素 source元素可以链接不同的视频文件 浏览器将使用第一个可识别的格式 实例 Yourbrowserdoesnotsupportthevideotag HTML5视频音频 audio如何工作audio元素允许多个source元素 source元素可以链接不同的音频文件 浏览器将使用第一个可识别的格式 实例 Yourbrowserdoesnotsupporttheaudiotag HTML5视频音频 效果 Page31 Video播放视频 Audio播放声音 HTML5WebRTC 关于WebRTC 来由 WebRTC WebRealTimeCommunication 并不是Google原来自己的技术 在2010年 Google收购了VoIP软件开发商GlobalIPSolutions公司 并因此获得了该公司拥有的WebRTC技术 意义 WebRTC实现了基于网页的视频会议 标准是WHATWG协议 目的是通过浏览器提供简单的JavaScript就可以达到实时通讯 Real TimeCommunications RTC 能力 主要是让Web开发者能够基于浏览器 Chrome FireFox 轻易快捷开发出丰富的实时多媒体应用 而无需下载安装任何插件 Web开发者也无需关注多媒体的数字信号处理过程 只需编写简单的Javascript程序即可实现 W3C等组织正在制定Javascript标准API来完善WebRTC项目 兼容性 WebRTC提供了视频会议的核心技术 包括音视频的采集 编解码 网络传输 显示等功能 并且还支持跨平台 windows linux mac android Page32 HTML5WebRTC 使用WebRTC的四大理由 1 HTML HTTP和TCP IP是开放和免费实现的 浏览器通信领域提供免费 高质量 完整的解决方案2 集成了最佳的音频 视频引擎 并被部署到数以百万级的终端中 3 使用STUN ICE TURN RTP over TCP的关键NAT和防火墙穿越技术 并支持代理 4 WebRTC通过提供直接映射到PeerConnection的信号状态机来抽象信号处理 Page33 HTML5WebRTC Page34 WebRTC构架图 HTML5WebRTC Page35 WebRTC构架组件介绍 1 YourWebAppWeb开发者开发的程序 Web开发者可以基于集成WebRTC的浏览器提供的webAPI开发基于视频 音频的实时通信应用 2 WebAPI面向第三方开发者的WebRTC标准API Javascript 使开发者能够容易地开发出类似于网络视频聊天的web应用 最新的标准化进程可以查看这里 3 WebRTCNativeC API本地C API层 使浏览器厂商容易实现WebRTC标准的WebAPI 抽象地对数字信号过程进行处理 HTML5WebRTC Page36 4 Transport Session传输 会话层会话层组件采用了libjingle库的部分组件实现 无须使用xmpp jingle协议 5 VoiceEngine音频引擎是包含一系列音频多媒体处理的框架 包括从视频采集卡到网络传输端等整个解决方案 6 VideoEngineWebRTC视频处理引擎VideoEngine是包含一系列视频处理的整体框架 从摄像头采集视频到视频信息网络传输再到视频显示整个完整过程的解决方案 HTML5WebRTC Page37 WebRTC应用举例 网络在线钢琴弹奏 HTML5canvas 画布元素 Canvas以及WebGL视频加速首先还是来看一个场景 构建3D虚拟拓扑图 某3D网管 HTML5canvas Canvas简介什么是Canvas HTML5的canvas元素使用JavaScript在网页上绘制图像 画布是一个矩形区域 您可以控制其每一像素 canvas拥有多种绘制路径 矩形 圆形 字符以及添加图像的方法 HTML5canvas CanvasAPIcanvas HTML5最期待元素之一 可以通过脚本可以任意创建图形 编辑图形 导入图片 导出图片 其中分2D与3D 2DcontextAPI 基本线条 路径 插入图像 像素级操作 文字 阴影 颜色渐变等提供图形绘制功能 3DcontextAPI WebGL WebGl定义了一套API 能够允许在网页中使用类似于OpenGL 实际上是一套基于OpenGLES2 0的3d图形API 这些API是通过HTML5的canvas标签来使用的 HTML5canvas 创建Canvas元素向HTML5页面添加canvas元素 规定元素的id 宽度和高度 通过JavaScript来绘制canvas元素本身是没有绘图能力的 所有的绘制工作必须在JavaScript内部完成 varc document getElementById myCanvas varcxt c getContext 2d cxt fillStyle FF0000 cxt fillRect 0 0 150 75 HTML5canvas JavaScript使用id来寻找canvas元素 varc document getElementById myCanvas 然后 创建context对象 varcxt c getContext 2d getContext 2d 对象是内建的HTML5对象 拥有多种绘制路径 矩形 圆形 字符以及添加图像的方法 在此就不一一例举了 下面的两行代码绘制一个红色的矩形 cxt fillStyle FF0000 cxt fillRect 0 0 150 75 fillStyle方法将其染成红色 fillRect方法规定了形状 位置和尺寸 HTML5canvas 演示效果 构造一个简单的Canvas3D物体 Canvas基本作图API之画板 HTML5FORM 增强的表单Form什么是表单 在Javascript中 页面html上的每一对标记都解析为一个对象 即form对象 为提交数据的对象 HTML5FORM 场景 配置页面 增加配置的流畅性和容错性 注册 增加注册的流畅性和无障碍浏览 HTML5FORM 新的FORM表单HTML5的表单定义了十几个新的元素和特性 这些新增元素可以代码更为易用 简洁和高效 这些新的东西包括 1 新元素 Email Number Range colorpicker等2 新属性 placeholder pattern required autofocus multiple等特性3 新样式 新的伪类样式 比如 focus required valid等4 新的输入方式 语音输入 x webkit speech可以让标签接受语音并转化为数字 HTML5FORM DemoE mail url number 滑动条 HTML5FORM Datalist keygen output HTML5FORM Opera全部支持chrome支持keygenkeygen元素的作用是提供一种验证用户的可靠方法 keygen元素是密钥对生成器 key pairgenerator 当提交表单时 会生成两个键 一个是私钥 一个公钥 私钥 privatekey 存储于客户端 公钥 publickey 则被发送到服务器 公钥可用于之后验证用户的客户端证书 clientcertificate 浏览器对此元素的支持度不足对比Structstoken令牌output元素用于不同类型的输出 比如计算或脚本输出 HTML5FORM 演示 HTML5CSS3 HTML5之CSS3 HTML5CSS3 从上页的场景可以看到HTML官方logo华丽丽滴诞生了 您可以起官方logo页面 点击这里 其观摩 它是如此的闪耀 以至于我不得不用手挡住眼前的强光 它的朝气 它的魄力迎面袭来 让人窒息 就实现而言 使用了不少的CSS3的东东 主要用来实现旋转效果 然后 元素很疯狂地使用绝对元素定位 然后 一点一点 就成了 因为使用了CSS3 此logo效果使用CSS3的内容大致就是这些 webkit transform skewX 5deg moz transform skewX 5deg o transform skewX 5deg ms transform skewX 5deg transform skewX 5deg webkit transform origin 100 0 moz transform origin 100 0 o transform origin 100 0 ms transform origin 100 0 transform origin 100 0 HTML5CSS3 CSS3新特性选择器RGBA和透明度多栏布局 弹性布局 水平布局 垂直布局 多背景图WordWrap文字阴影 font face属性盒阴影 阴影 文本阴影盒模型 多背景 圆角 边框半径 边框图片2D 旋转 缩放 倾斜 请参考 CSS基础变换3D 透视 transform3D 等等媒体查询语音 HTML5CSS3 CSS3选择器奇偶选择器 row nth child even background dde row nth child odd background white 属性选择器input type text background eee HTML5CSS3 HTML5CSS3 Css32D 灰太狼 华为Logo HTML5CSS3 Css33D Google3Dbox 旋转的立方体 HTML5SVG SVG矢量图形 HTML5SVG SVG ScalableVectorGraphics 可缩放矢量图形 使用XML来描述二维图形和绘图程序的语言 可以在浏览器中构造矩形 圆形 椭圆 线条 多边形 折线 路径 滤镜效果 渐变效果 和动画等 HTML5SVG SVG形状SVG有一些预定义的形状元素 可被开发者使用和操作 矩形圆形椭圆线折线多边形路径 HTML5SVG 要理解它的工作原理 请把这些代码拷贝到记事本 然后保存为 rect1 svg 文件 把此文件放入web目录中 代码解释 rect元素的width和height属性可定义矩形的高度和宽度style属性用来定义CSS属性 CSS的fill属性定义矩形的填充颜色 rgb值 颜色名或者十六进制值 CSS的stroke width属性定义矩形边框的宽度CSS的stroke属性定义矩形边框的颜色 HTML5SVG 运行以上代码得到 简单的图形元素 复合图表 HTML5SVG HTML5的图形机制比较 SVGVSCanvas HTML5SVG 相同点 均是HTML5规范的一部分均能实现图形和动画均可以通过脚本编程控制显示 HTML5SVG 不同点 HTML5SVG 总结 互有所长 均适用不同应用场景 SVG更适合规则图形的绘制和动画 更好管理 典型场景 图表 流程图等高保真度矢量文档 Canvas更适合不规则或涉及像素级的变化场景 更高效 典型场景 图片编辑和图形数据分析 位图动画 2D游戏 3D虚拟空间等像素操作 HTML5离线存储 本地存储解决方案很多 比如FlashSharedObject GoogleGears Cookie DOMStorage UserData window name Silverlight OpenDatabase等 HTML5离线存储 CookiefunctionSetCookie sName sValue vardate newDate document cookie sName escape sValue expires date toGMTString functionGetCookie sName varaCookie document cookie split for vari 0 i aCookie length i varaCrumb aCookie i split if sName aCrumb 0 returnunescape aCrumb 1 returnnull HTML5离线存储 functionDelCookie sName document cookie sName escape sValue expires Fri 31Dec199923 59 59GMT userData1 userData将数据以XML格式保存在客户端计算机上 windows 2 C DocumentsandSettings Liming UserData 3 userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构 4 每页的UserData存储区数据大小可以达到64Kb 每个域名可以达到640Kb 5 userData行为通过sessions为每个对象分配UserData存储区 6 HTML HEAD TITLE和STYLE标记上应用了userData行为后将会出错成员expires设置或取得使用userData行为保存数据的失效日期getAttribute 取得指定的属性值 load 存储区名 从userData存储区载入存储的对象数据 removeAttribute 删除指定的属性值 save 存储区名 将对象存储到一个userData存储区 setAttribute 设置指定的属性值 XMLDocument取得存储该对象数据的XML DOM引用 HTML5离线存储 userDataDemo1 userData behavior url default userdata 2 3 object style behavior url default userData 4 object addBehavior default userData functionfnSaveInput varoPersist oPersistForm oPersistInput oPersist setAttribute sPersist oPersist value oPersist expires newDate 1980 0 1 7 59 59 toUTCString oPersist save oXMLBranch functionfnLoadInput varoPersist oPersistForm oPersistInput oPersist load oXMLBranch oPersist value oPersist getAttribute sPersist HTML5离线存储 sessionStoragelocalStorage核心方法 sessionStorage setItem key value sessionStorage key value sessionStorage removeItem key sessionStorage getItem key sessionStorage keysessionStorage clear localStorage与sessionStorage方法相同Demoif localStorage pageLoadCount localStorage pageLoadCount 0 localStorage pageLoadCount parseInt localStorage pageLoadCount 1 document getElementById count text localStorage pageLoadCount HTML5离线存储 WebSQLDatabase核心方法 1 openDatabase function t 创建数据库 数据库名 版本号 描述 大小 b 匿名函数 可省略 2 transaction function tx 执行查询 匿名函数 tx 事物类型 负责实际的查询 3 executeSql function tx result function tx error 真正执行查询 sql语句 参数 成功函数 事物参数 结果集 失败函数 事物参数 结果集 Sql语句demoSELECTCOUNT FROMtbCREATETABLEdb idREALUNIQUE labelTEXT timestampREAL INSERTINTOdb label timestamp values text newDate getTime INSERTINTOdb label timestamp values Test 1265925077487 HTML5离线存储 查询结果获取 result rows item i result rows item i label data rows 0 labeldata rows 0 label WebSQLDatabaseDemo HTML5离线存储 WebSQLDatabaseDemovardb openDatabase DBName 1 0 Alistoftodoitems 5 1024 1024 5MBIf db db transaction function tx tx executeSql SELECTCOUNT FROMTBName function tx result for vari 0 i result rows item i label function tx error tx executeSql CREATETABLETBName idREALUNIQUE labelTEXT timestampREAL null null tx executeSql INSERTINTOToDo label timestamp values test newDate getTime null null HTML5离线存储 离线存储使得你的web应用可以在用户离线的状况下进行访问 离线存储的两个特性 1离线资源缓存2本地数据存储localstorage离线存储技术技术显然至少有三个好处 1最直接的好处就是用户可以离线访问你的web应用2因为文件被缓存在本地使得web页面加载速度提升许多3离线应用只加载被修改过的资源 因此大大降低了用户请求对服务器造成的负载压力 HTML5Cache WebApplicationCache用法1 需要在页面的html标签中通过manifest属性引用一个manifest文件使得应用可缓存 2 manifest文件是一个文本文件 它罗列了离线访问应用时所需缓存的文件清单 3 引用该manifest文件的页面 不管你有没有罗列到清单中 都会被缓存 HTML5Cache WebApplicationCache服务器要求1 配置manifest的文本文件 servedastext cache manifest UTF 8 2 增加服务器MIME类型信息 text cache manifest 3 MIME 多用途Internet邮件扩展 MIME 类型说明了Web浏览器或邮件应用程序如何处理从服务器接收的文件 当Web浏览器请求服务器上的某一项目时 也会请求此对象的MIME类型 某些MIME类型 例如图形 可以在浏览器内部显示 其他的MIME类型 例如文字处理文档 则需要使用外部帮助应用程序来显示 HTML5Cache WebApplicationCache好处1 最直接的好处就是用户可以离线访问你的web应用2 因为文件被缓存在本地使得web页面加载速度提升许多3 离线应用只加载被修改过的资源 大大降低了用户请求对服务器造成的负载压力 HTML5Cache WebApplicationCacheManifest语法CACHEMANIFESTCACHEa Jpgb CssIndex aspxNETWORK Login aspxRegister aspxFALLBACK default aspx index aspx 404 html 注释符号Demo HTML5Cache WebApplicationCache更新1 删除缓存数据2 修改manifest文件3 用js更新varcache window applicationCache Cache swapCache 监听事件onchecking onerror onnoupdate ondownloading onprogress onupdateready oncached和onobsolete cache addEventListener error handleCacheError false functionhandleCacheError e alert Error Cachefailedtoupdate HTML5webworker WebWorkersWebWorkers为WEB前端网页上的脚本提供了一种能在后台进程中运行的方法 一旦它被创建 WebWorkers就可以通过postMessage 向任务池发送任务请求 执行完之后再通过postMessage 返回消息给创建者指定的事件处理程序 通过onmessage进行捕获 varworker newWorker worker js 并发线程 新线程worker onmessage function message vara message Data 主线程worker postMessage aaa 主线程异步函数 runthreadWorker jsvaronmessage function message varm message data 处理数据postMessage m 参数可是obj Json name 小明 message data name HTML5webSocket WebSocket背景http zh wikipedia org wiki WebSocket1 WebSocket是下一代客户端 服务器的异步通信方法 2 WebSocket最伟大之处在于服务器和客户端可以在任意时刻相互推送信息3 Ajax技术需要客户端发起请求 WebSocket服务器和客户端可以彼此相互推送信息4 XHR XMLHttpRequest 受到域的限制 而WebSocket允许跨域通信Clientvarsocket newWebSocket ws localhost 8080 socket onopen function event socket send IamtheclientandI mlistening socket onmessage function event socket onclose function event socket close HTML5拖拽 DragandDropHTML5为元素新增了用于拖拽的属性draggable 这个属性决定了元素是否能被拖拽 如果draggable true 则元素可被拖拽 否则只能选择元素的文本 值得一提的是HTML5支持拖拽数据存储 使用dataTransfer对象 dragstart 要被拖拽的元素开始拖拽时触发 这个事件对象是被拖拽元素dragenter 拖拽元素进入目标元素时触发 这个事件对象是目标元素dragover 拖拽某元素在目标元素上移动时触发 这个事件对象是目标元素dragleave 拖拽某元素离开目标元素时触发 这个事件对象是目标元素dragend 在drop之后触发 就是拖拽完毕时触发 这个事件对象是被拖拽元素drop将被拖拽元素放在目标元素内时触发 这个事件对象是目标元素dragstart dragenter dragover drop dragend HTML5拖拽 DragandDrop其中HTML结构如下 垃圾箱列表1列表2列表3列表4列表5列表6 div HTML5拖拽 DragandDrop其中JS结构如下 var function selector 简单的选择器方法 vareleDustbin dustbin 0 eleDrags draglist lDrags eleDrags length eleRemind dragremind 0 eleDrag null for vari 0 i lDrags i 1 eleDrags i onselectstart function returnfalse eleDrags i ondragstart function ev 拖拽开始 拖拽效果ev dataTransfer effectAllowed move ev dataTransfer setData text ev target innerHTML ev dataTransfer setDragImage ev target 0