HTML5 鼠标拖拽以及web存储

html5
拖拽:
(function(){}())执行匿名函数,要用括号包括起来;
1:用鼠标事件来做拖拽;
2:在HTML5中加入draggable="true",就可以拖拽但是是分成了两个,这个更有效率;

ondragstart:拖拽开始;
ondrag:拖拽中
ondragend:拖拽结束;
ondragenter:进入投放去;
ondragover:投放区移动;
ondragleave:离开投放区;
ondrop:投放区投放;
          ondragover会阻止drop的发生;所以需要在ondragover里面加上
      e.preventDefault();阻止该默认事件的发生

地理定位:
navigator.geolocation:

web存储:
cookie:存放在客户浏览器端的数据;浏览器和服务器用来维持状态的方法之一; 有限制不超过4KB;每次提交到服务器。

sessionStorage:HTML5提供的一个方法,浏览器提交给服务器,没有大小的限制,但是有时间的限制,只有一次会话。

localStorage:HTML5提供的一个方法,没有大小的限制,也没有时间的限制。有固定的浏览器的存储位置。同一个浏览器可以共享。
                  都只能存储在浏览器。换了浏览器就没有。

时间: 2024-10-08 08:16:20

HTML5 鼠标拖拽以及web存储的相关文章

HTML5开发 拖拽文件上传

Drag&Drop 拖拽功能的处理 关于HTML5拖拽文件上传,其实国外已经有很多网站有这样的应用,最早推出拖拽上传应用的是 Gmail,它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送,但其实现在利用HTML5的功能实现,主要借助于新版支持的浏览器来实现,IE还是弱很多. 拖拽上传应用主要使用了以下 HTML5技术: Drag&Drop : HTML5基于拖拽的事件机制.File API : 可以很方便的让 Web 应用访问文件对象,File API 包括FileList.Bl

HTML5之拖拽(兼容IE和非IE)

前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不

Nodejs express、html5实现拖拽上传

Nodejs express.html5实现拖拽上传 一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.No

js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特点: ? 封装 : 看不到里面的东西 , 用好表面功能. ? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性. ? 多态 ? 抽象 : 抽取一个功能里面多个核心的功能模块. ? 思想: 高内聚.低耦合 ? 低耦合 :每个功能模块之间耦合度要低 ? 高内聚 :模块内部要紧密相连 面向

JavaScript鼠标拖拽特效及相关问题总结

#div1{width:200px;height:200px;background:red;position:absolute;} #div2{width:200px;height:200px;background:green;position:absolute;left:300px;} <div id="div1">原来的 普通拖拽</div> <div id="div2">继承的 限制范围拖拽</div> wind

unity 鼠标拖拽物体实现任意角度自旋转

主要涉及函数 Input.GetAxis(“Mouse x”) 可取得鼠标横向(x轴)移动增量 Input.GetAxis(“Mouse y”) 可取得鼠标竖向(y轴)移动增量 通过勾股定理获取拖拽长度,长度越长旋转越快 在project setting--Input 可以设置 直接上代码,看了就明白了 1 using UnityEngine; 2 using System.Collections; 3 4 public class startRoate : MonoBehaviour 5 {

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

HTML5实战与剖析之Web存储机制(Web Storage)

Web Storage是以Key-Value的形式进行数据持久性存储.Web Storage是为了克服由cookie带来的一些限制而产生的.当数据需要被严格控制在客户端上的时候,无须持续地将数据发回服务器.Web Storage的目标有两个:提供一种存储会话数据的路径;提供存储大量可以跨会话存在的数据的机制. 最初的Web Storage规范包含了两个对象的定义:sessionStorage对象和globalStorage对象.这两个对象在支持的浏览器中都是以window对象属性的形式存在,支持

js实现鼠标拖拽div-------Day44

如果去问这样一个问题"你觉得鼠标操作简单,还是键盘操作简单",相信会有多数人都会回答鼠标吧,毕竟键盘按钮那么多,如果手小了或者手法不规范了,太容易出问题了,也对操作的速度和有效性是大大的降低了,当然不可否认,会有那么一批人,操作起键盘来完全可以忽略鼠标的,但这些都应该是骨灰级别的了吧,起码我现在的层次还接触不到,只能向往. 然而,当面对这么一个问题时,我突然有点纠结,因为毕竟以前我也是那么想的,但是这次开发让我是大跌眼镜,键盘操作我在开发中,我只能判定其按键是否按键,然后根据不同按键进