首页
学习
活动
专区
工具
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.6K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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() 如果存在指定内容的话就删除,如果不存在的话就添加。

    86020

    前端|HTML5网络存储

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

    1.4K10

    HTML5引入关键特性

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

    1.2K90

    HTML5download属性应用

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

    1K10

    HTML5设计原理(

    答案是,这是在Internet Explorer触发标准模式最少字符数目。我认为这也说明了HTML5规范本质:它不追求理论上完美。... 在HTML5,我只要简单地把所有内容都包装在一个链接元素中就行了。...在HTML5,这些元素都可以换掉。说起新增语义元素,它们价值一方面可以这样来体现:“嘿,看啊,这样多好,用HTML5新增元素可以把这些div都替换掉。” ......在HTML5,只要你建立一个新内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里标题在整个页面应该排在什么级别;H2、H3,...不要紧,但我可以告诉你,我认为这才是HTML5这些新语义标记真正价值所在。换句话说,我们现在有了独立元素了,这些元素标题级别可以重新定义。

    1.6K10

    关于HTML5sessionStorage和localStorage

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

    1.3K60

    HTML5Web Notification桌面通知

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

    2.3K60

    HTML5DOM扩展(三)插入标记

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

    1.9K40

    聊聊HTML5Web Notification桌面通知

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

    2.3K30

    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

    Zip 压缩和解压技术在 HTML5 应用

    在 web 应用,免不了需要从 web 服务器获取资源,如果可以将所有的资源都合并到一个 .zip 文件,这时候只需要做一次请求,这样既减少了服务器压力,同时也可以加快 web 应用呈现速度。...', 'js/ht-modeling.js', 'obj/equipment.mtl', 'obj/equipment.obj', 'image/equipment.jpg' 在资源加载顺序,要标明响应资源相对于...{ binary += String.fromCharCode( bytes[ i ] ); } return window.btoa( binary ); } 这次案例...,有涉及到 3D 模型数据与 HT 3D 拓扑应用结合,在 .zip 文件 obj 目录就是存放 3D 模型数据,在文件读取,将 3D 模型数据以文本对形势读取出来存放到变量,再将数据传递到...,因为采用 JSZip 无法将 .zip 文件内容写回到本地目录,所以只能将贴图属性对应属性名称作为 HT  image 名称设置到 HT ,以便 HT 模型加载时候能够获取得到模型所需要图片资源

    2K80

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    热门标签

    领券