首页
学习
活动
专区
工具
TVP
发布

HTML5拖放功能

HTML5拖放API功能直接实现拖放操作,而且拖放范围已经超出浏览器边界,HTML5提供文件api支持拖拽多个文件并上传。...要学会掌握html5拖放api和 文件api,光标拖放事件,从web网页上访问本地文件系统。...拖放api 在html5拖放api重点: 第一,为页面元素提供了拖放特性; 第二,为光标增加了拖放事件; 第三,提供了用于存储拖放数据DataTransfer对象 draggable特性 draggable...光标拖放事件 在html5提供了7个与拖放相关光标事件: 按照时间顺序: 第一,开始拖拽时触发事件,事件作用对象是被拖拽元素-dragstart事件 第二,拖放过程触发事件,事件作用对象是被拖拽元素...-drop元素 第七,在拖放操作结束时触发,事件作用对象是被拖拽元素-dragend事件 DataTransfer对象 在html5提供了DataTransfer对象,用来支持拖拽数据存储。

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

HTML5DOM扩展(一)

---- theme: channing-cyan 这是我参与8月更文挑战第22天,活动详情查看:8月更文挑战 我们都知道HTML5与之前html是截然不同方向,html5规范新增了很多DOM节点操作...我们下面来展开说一下 css类扩展 伴随着HTML4发展,class类使用也逐渐变多,主要是我们用css属性也变多了,其中有俩个DOM扩展方法被广泛使用。...一个是获取css类元素,还有一个是实现类名增删改查。...IE9版本以上浏览器都支持这个属性。 classList属性 classList更加方便了我们添加和删除class类,它也有length属性,还可以通过item()或者数组括号来获取其中元素。...contains() 判断内容是否存在类,返回是布尔值 remove()顾名思义啦,删除 toggle() 如果存在指定内容的话就删除,如果不存在的话就添加。

81920

前端|HTML5网络存储

传统方式使用document.cookie来进行存储,但是由于其存储空间只有4KB左右,并且需要复杂操作进行解析,给发开者带来很多不便,为此,HTML5规范提出了网络存储解决方案。...2.2 localStorage实现本地存储 localStorage作为HTML5 Web StorageAPI之一,主要作用是进行本地存储。...2.2.1 localStorage方法属性 方法属性 描述 setItem(key,value) 该方法接收一个键名和值作为参数,将会把键值对添加到存储,如果键名存在,则更新其对应值 getItem...数据保存在浏览器内存,当浏览器关闭后,内存将被自动清除,需要注意是,sessionStorage存储数据只在当前浏览器窗口有效。...两种存储方式都比较实用,我们在设计前端页面时,可以根据相应用户访问情况预测来增添相应js,既增加了用户浏览体验,又能实现存储管理高效性,合理利用存储空间。

1.3K10

HTML5download属性应用

2015-09-22 01:43:08 写这篇文章主要是来向大家介绍一下HTML5当中download属性用法和之前下载区别。需要朋友可以看一下。...在以往传统html下载文件样式是这样 下载 而在HTML 5浏览器,可以支持download属性了,如下: 下载 download属性好处在于,在用户下载文件时候,显示在用户浏览器 “另存”为文件显示框...,显示是这个downloader属性显示 东西了,比较友好 HTML5里,download属性为下载文件取一个合适名字,而不是使用原生服务器文件名。...在这个例子,文件将被下载为test.txt。download属性同时开启了一个强制下载。 这个属性在存在文件交互地方非常有用,在服务器端文件名需要是及其独特(上例文件名就很独特不是吗?)

96610

HTML5引入关键特性

不指定变化后内容如何保存 contextmenu 定义menu元素DOM id作为定义钙元素特性上下文菜单 data-X 制定可以包含在标签用户定义元数据,而不必担心这些元数据与当前特性或者未来特性冲突...使用这种类型特性可以避免创建自定义特性或者过载class特性常见方法 draggable 定义特性时,允许元素与其内容可以被拖放 hidden 在HTML5,所有元素都可以有hidden特性,用于表示元素不相关...这是一个可选特性,如果使用该特性,那么就必须将其放置在设置itemscope和itemtype两个特性元素。...在默认情况下,只在包含itemscope特性子元素寻找。然而,如果数据相互交叉,只有唯一一个父项时,这个特性就没有意义了。在这里,itemref特性可以设置为在一组由空格分割开子元素寻找。...该特性是可选,但是如果使用它,就必须将其放置在设置了itemscope特性元素 itemtype 该特性要与itemscope特性结合使用,用于定义一个microdata项全局类型。

1.2K90

LayaAir登录HTML5 Game Development,获外媒肯定!

近日,世界知名HTML5行业垂直媒体HTML5 Game Development对LayaAir进行了报道。详细介绍了LayaAir H5游戏引擎并对LayaAir H5游戏引擎功能进行了介绍。...HTML5 Game Development肯定了LayaAir在性能方面达到高度,着重介绍了三端同发(APP手游、Flash页游、HTML5游戏)特色功能,并将之称其为“让开发商感到兴奋”事情。...以下为原文: LayaAir HTML5 Engine The stable release of LayaAir 1.0.0 was recently released and developers...HTML5 Game Development是著名HTML5领域综合开发者网站,汇集了世界上最新HTML5游戏,技术,引擎等相关资讯。...此次对于LayaAir报道,说明了LayaAir已经获得了国际主流科技媒体关注,为LayaAir未来走向海外打下了基础。

69420

Vue验证登录状态

存储到sessionStorage,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token,没有就跳转到登录页面..., #导航卫士 在main.js配置一个全局前置钩子函数:router.beforeEach(),他作用就是在每次路由切换时候调用 这个钩子方法会接收三个参数:to、from、next。...to:Route:即将要进入目标的路由对象, from:Route:当前导航正要离开路由, next:Function:个人理解这个方法就是函数结束后执行什么,先看官方解释 1.next():进行管道下一个钩子...每次跳转时都会判断sessionStorage是否有token值,如果有则能正常跳转,如果没有那么就返回登录页面。...#注销 至此就完成了一个简单登录状态了,浏览器关闭后sessionStorage会清空,所以当用户关闭浏览器再打开是需要重新登录 当然也可以手动清除sessionStorage,清除动作可以做成注销登录

2.6K10

HTML5设计原理(

答案是,这是在Internet Explorer触发标准模式最少字符数目。我认为这也说明了HTML5规范本质:它不追求理论上完美。...大家可以登录htmllint.com,在其中运行你HTML5文档,它会帮你检查属性值是否加了引号,元素是否小写,你还可以通过勾选复选框来设置其他检查项。...在HTML5,这些元素都可以换掉。说起新增语义元素,它们价值一方面可以这样来体现:“嘿,看啊,这样多好,用HTML5新增元素可以把这些div都替换掉。” ......在HTML5,只要你建立一个新内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里标题在整个页面应该排在什么级别;H2、H3,...不要紧,但我可以告诉你,我认为这才是HTML5这些新语义标记真正价值所在。换句话说,我们现在有了独立元素了,这些元素标题级别可以重新定义。

1.5K10

关于HTML5sessionStorage和localStorage

需求:     做项目的时大多数情况下我们需要对请求数据进行多次复用,为了降低请求次数我们需要对请求数据进行本地存储;    以前用cooking来存储为本地数据,HTML5后提出sessioStorage...cooking Cookie大小是受限,并且每次你请求一个新页面的时候Cookie都会被发送过去,这样无形浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。...SessionStorage: 将数据保存在session对象,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过这段时间会话,也就是用户浏览这个网站所花费时间就是session...Value:表示值,也就是你要存入Key值,可以按照变量赋值来理解。...可以很明显看到输出字符串,不是我们想要object。 所以就查资料啊。 发现了JSON。

1.2K60

HTML5Web Notification桌面通知

大家在做一些浏览器端聊天功能时候,或者在一些网站跟在线客服咨询时候,会看到一些消息通知提示,常见有浏览器标签页闪烁和屏幕右侧消息通知。本篇博客就在这里简单介绍一下如何实现这样功能。...1、实现标签页闪烁效果 实现效果: 当前窗体失焦时候,标题开始闪动,当前窗体获取焦点时候,则停止闪动。...注意:这里需要用到窗口获取焦点和失去焦点方法,由于IE和其他Chrome及FireFox区别,这里需要用到方法就不一样,具体是:   Chrome和FireFox浏览器是windowonfocus...此时,localhost:63342站点就可以出现通知消息了(消息通知弹窗在Mac和windows两个系统下可能出现位置有些不一样,自己设置logo出现位置也会有些不同),Mac消息通知窗口是从屏幕右上角出来...,就不清楚) 本篇博客也只是简单记录一下如何实现这样消息通知效果,想了解更详细知识点,可以参考张鑫旭大神博客: http://www.zhangxinxu.com/wordpress/2016/

2.2K60

HTML5DOM扩展(三)插入标记

插入标记 我们之前用api大多数都是获取元素内容,HTML5规范定义了一个向标签元素内添加内容方法。...insertAdjacentHTML()和inserAdjacentText() 这俩个方法都接受俩个参数,第一个参数是固定,必须是以下4类型 "beforebegin",插入当前元素前面,作为前一个同胞节点...,作为下一个同胞节点 他们第二个参数就和我们上面innerHTML和outerHTML需要属性一样了,我这里写一个方式吧。...性能问题 我们虽然这样操作的话会比我们修改HTML内容方便,但是我们修改内容如果还有其他绑定js事件或者操作,就会导致内存占用比较大,我们在用时候一定要注意被替换元素上所关联js事件。...,里面可能写一些烂七八糟内容导致我们页面程序瘫痪。我们在用innerHTML时候一定要进行转义或者隔离插入数据。

1.9K40

HTML5Canvas元素使用总结 原

HTML5Canvas元素使用总结     Canvas提供了开发者自定义绘图接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数可以传入两个参数,其中第1个参数设置绘图上下文类型...context.moveTo(110,350); context.arc(60,350,50,0,2*Math.PI,false); context.stroke(); arc函数,...其中sx,sy和sw,sh用来对原图像进行裁剪,只选择图像部分进行绘制,x,y,w,h设置绘制在画布上坐标和尺寸。    ...3.绘制属性设置     在绘制过程,开发者可以对绘制线条颜色,填充颜色,风格,阴影等进行设置。...createLinearGradient函数用来创建线性渐变层,其中4个参数设置起始点x,y和结束点x,y。调用addColorStop函数用来想渐变层添加临界点和颜色值。

1.8K10

聊聊HTML5Web Notification桌面通知

有的时候我们会在桌面右下角看到这样提示: ? 这种桌面提示是HTML5新增 Web Push Notifications 技术。...options(可选)对象包含应用于通知任何自定义设置选项。 常用选项有: body: 通知正文,将显示在标题下方。 tag: 类似每个通知ID,以便在必要时候对通知进行刷新、替换或移除。...icon: 显示通知图标 image: 在通知正文中显示图像URL。 data: 您想要与通知相关联任意数据。这可以是任何数据类型。...通知事件 但是单纯显示一个消息框是没有任何吸引力,所以消息通知应该具有一定交互性,在显示消息前前后后都应该有事件参与。...; } // 如果用户没有选择是否显示通知 // 注:因为在 Chrome 我们无法确定 permission 属性是否有值,因此 /

2.1K30
领券