首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5拖放功能

HTML5拖放API功能直接实现拖放操作,而且拖放范围已经超出浏览器边界,HTML5提供文件api支持拖拽多个文件并上传。...要学会掌握html5拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...光标拖放事件 在html5中提供了7个与拖放相关光标事件: 按照时间顺序: 第一,开始拖拽时触发事件,事件作用对象是被拖拽元素-dragstart事件 第二,拖放过程中触发事件,事件作用对象是被拖拽元素...-drop元素 第七,在拖放操作结束时触发,事件作用对象是被拖拽元素-dragend事件 DataTransfer对象 在html5中提供了DataTransfer对象,用来支持拖拽数据存储。...把添加监听事件处理函数DragOver()追加到window.onload事件中,对于目标元素preventDefault(),必须取消浏览器默认处理,否则将无法实现拖放功能

2.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5新增表单验证功能

一、HTML5表单特点: HTML5 表单增加了许多内置控件和控件属性 XHTML 中需要放在 form 之中诸如 input/button/select/textarea 等标签元素,在 HTML...二、HTML5新增控件类型: email输入类型: 要求输入格式正确 email 地址,否则浏览器不允许提交,同时会提示错误信息...="on" /> 此属性是为表单提供自动完成功能,如果该属性为打开状态可很好地自动完成,一般来说,此属性必须启动浏览器自动完成功能 data属性: HTML5 支持 data 属性,为 select 控件外联数据源,可以在 select 下拉别表动态添加来自数据库各组选项, 比如说国家、省市列表等等。...HTML5 提供一种新数据格式:XML Submission,即 application/x-www-form+xml。简单举例说,服务器端将直接接收到 XML 形式表单数据。

2.5K30

麻省理工智能拖曳

麻省理工学院海洋基金会流体力学实验室开发了一种自动化实验设备——智能拖曳池(ITT),能够自动、自适应地执行、分析和设计探索涡激振动(VIV)实验。...在主动学习指导下,ITT可以进行一系列实验:由计算机选择下一个实验参数,使用“探索-利用”方法,大大减少探索和绘制控制VIV复杂力量所需实验数量。...涡激振动是一种固有的非线性运动,它是在一种非规则交叉流中对结构产生一种运动。研究人员报告说,国际电话电报公司完成实验数量已经与迄今为止世界范围内有关VIVs实验总数相当。...机器人系统会周期性地,以恒定速度,自动进行一系列初始实验,在这个过程中,ITT能起到作用是,通过最小化、量化不确定性适当采集函数,来实现一系列目标(如减少阻力等),与此同时,对下一个实验参数进行部分控制...今年早些时候,ITT研究人员获得了麻省理工学院颁发德弗洛雷斯机械工程奖,ITT则被评为:利用新方法使老化油田重新焕发生机杰出范例。

49410

html5利用websocket完成推送功能(tomcat)

利用websocket和java完成消息推送功能,服务器用是tomcat7.0.42,一些东西是自己琢磨,也不知道恰不恰当,不恰当处,还请各位见谅,并指出。...2.websocket优点 以前我们实现推送技术,用都是轮询,在特点时间间隔有浏览器自动发出请求,将服务器消息主动拉回来,在这种情况下,我们需要不断向服务器发送请求,然而HTTP request...header是非常长,里面包含数据可能只是一个很小值,这样会占用很多带宽和服务器资源。...; }; 如果出现连接,处理,接收,发送数据失败时候就会触发onerror事件 我们可以看出所有的操作都是采用事件方式触发,这样就不会阻塞UI,使得UI有更快响应时间,得到更好用户体验。...1 每个用户在访问时候首先需要输入自己名字,接着向服务端发送连接请求 2 服务端在接受到客户端连接请求后,会new ChatWebSocket(users);用于处理这个请求,并把它加入在线用户列表中

1.4K60

HTML5简明教程(七)其他新技术

地理位置 HTML5地理定位功能由navigator.geolocation对象提供,API方法有三个: getCurrentPosition: 获取当前位置信息,包含经纬度,海拔,精度。...拖拽 HTML5提供拖拽API,可以在需要拖拽/目标的元素上监听这些事件,从而操作DOM元素。...相关事件有: ondragstart:当拖拽元素开始被拖拽时候触发事件(作用在被拖曳元素上) ondragenter:当拖曳元素进入目标元素时候触发事件(作用在目标元素上) ondragover...作用在被拖曳元素上) 可以参考https://github.com/etianqq/html5-dnd-demo ,这个demo实现了在列表上拖拽列表项从而实现重新排序功能。...功能还不止于系列文章中所提到,在《HTML5简明教程》中,只是把最常用也是比较有特色新特性介绍给大家,如有兴趣,可以去探索更多HTML5优秀功能

48110

HTML5】逐步分析如何实现拖放功能

那么在网页上其实也可以实现同样效果拖放功能,如图 ? 那么,就让我们来看看如何实现吧 二、拖放事件 在IE4时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。...后来随着IE版本更新,拖放事件也在慢慢完善,HTML5就以IE拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后版本都支持了该功能。...默认情况下,网页中图像、链接和文本是可以拖动,而其余元素若想要被拖动,必须将 draggable 属性设置为 true,这是HTML5规定新属性,用于设置元素是否能被拖动。...三、dataTransfer对象 上面只是简简单单地实现了拖放功能,但并没用利用该功能做出什么实际性功能,这里我们介绍一个拖放事件中事件对象上一个特别重要属性——dataTransfer 我们通过...设置字符串,并设置数据类型 getData 获取对应数据类型字符串 setData() 方法接收两个参数,第一个参数表示是字符串数据类型,HTML5规定了两种数据类型,分别是 text/plain

1.4K10

基于HTCSG功能构建HTML53D书架

构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型常用技术,可通过合并Union、相减Subtraction和相交Intersction三种取集逻辑运算...回到我们今天要搞3D书架例子,我们将基于HT for Web3D引擎来实现,HT已经内置了CSG功能模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附图元进行CSG技术合集...、并集和补集三种操作,一般运用中裁剪方式较为常用,因此CSGNode默认对Host图元操作就是裁剪。...书架两边分别摆放了两个不同风格小书台,通过上图我拖拽改变了蓝色CSGNode图元位置,大家通过两张图对比能更直观体会到CSG操作效果,玻璃门开关以及相册效果都是直接利用HT for Web3D...引擎提供模型,通过设置透明度、相片贴图和旋转动画等呢只功能参数即可。

1.1K20

基于HTCSG功能构建HTML53D书架

构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型常用技术,可通过合并Union、相减Subtraction和相交Intersction三种取集逻辑运算...回到我们今天要搞3D书架例子,我们将基于HT for Web3D引擎来实现,HT已经内置了CSG功能模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附图元进行CSG技术合集...、并集和补集三种操作,一般运用中裁剪方式较为常用,因此CSGNode默认对Host图元操作就是裁剪。...书架两边分别摆放了两个不同风格小书台,通过上图我拖拽改变了蓝色CSGNode图元位置,大家通过两张图对比能更直观体会到CSG操作效果,玻璃门开关以及相册效果都是直接利用HT for Web3D...引擎提供模型,通过设置透明度、相片贴图和旋转动画等呢只功能参数即可。

1.4K50

微软推出IE10第二个平台预览版

IE10将会伴随着明年出炉Windows 8问世,采用多种新HTML5标准,强化HTML5效能,同时也针对网络应用程序新增各种安全功能。...;通过对HTML5沙箱及隔绝IFRAME支持来改善网络应用程序安全性。...IE10 PP2将让高互动性且丰富应用程序更易展现,例如支持CSS3 Positioned Floats,可让文字或内容浮动在采用CSS架构网页上,并允许使用者能够拖曳所要摆放位置。...在安全上,IE10 PP2支持HTML5沙箱与iframe隔绝功能。...这让网站开发人员得以控制站上所出现元件,例如在使用第三方广告服务时,网站可通过沙箱功能来避免使用者受到这些外来广告所夹带恶意程序感染。

16910

使用Html5多媒体实现微信语音功能

随着微信等社交App兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能社交App,小到电商App语音客服、店小二功能,语音聊天成为了必不可少方式。...但是很多人感觉网页端语音离我们很遥远,这些更多是本地应用工作,其实不然,随着Html5发展,语音功能也渐渐成为前端必会功能之一。 为什么要学会HTML5 语音呢?...4.前端大部分人对语音功能有误解,以为语音功能就是HTML5 audio标签而已,事实上真的不是那么简单"而已" 不墨迹那么多,咱们直接开发一个小项目啥都明明白儿白儿了,先看效果图 业务逻辑非常简单...我只是为了讲解Html5功能,所以flex并没有写兼容性写法,另外App头部部分写法大家注意一下,那里是非常常用。 下面说重点js部分。 <!...OK,是不是很简单 ,整个项目我说几个点吧: 1.切图结构合理是你后面做功能前提,结构做好,后面就省事,想想诸葛不亮吧,未出茅庐人家就把html5结构搭好了,有三个section. 2.原生js和ES6

2.7K30

JavaScript 学习-50.实现页面菜单拖放(Drag 和 Drop)

前言 拖放是一种常见操作,即抓取对象以后从一个位置拖到另一个位置。 在 HTML5 中,拖放是标准一部分,任何元素都能够拖放。...拖放(Drag 和 Drop) 在拖曳操作中,被拖曳元素称做源对象,是指页面中设置了draggable=”true”属性元素;源对象进入元素称作目标元素,目标元素可以是页面的任一元素。...把元素设置为可拖放首先:为了把一个元素设置为可拖放,请把 draggable 属性设置为 true: 需要注意是,图片和链接默认是可以拖曳,它不用添加draggable...该方法将返回在 setData() 方法中设置为相同类型任何数据 被拖数据是被拖元素 id (“drag1”) 把被拖元素追加到放置元素中 使用示例 一个完整拖曳效果是由拖曳(Drag)和释放(Drop...)组成,在HTML 5中任何元素都能够实现拖曳操作,可以通过为元素添加属性draggable=’true’ 来实现, 在拖曳操作中,被拖曳元素称做源对象,是指页面中设置了draggable=”true

95020
领券