HTML5 鼠标拖拽以及web存储

本文介绍HTML5中的拖拽技术实现方式及其相关事件,同时对比了使用鼠标事件和HTML5特性实现拖拽的不同之处。此外,还详细介绍了HTML5提供的web存储技术,包括cookie、sessionStorage和localStorage的特点与应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

                               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提供的一个方法,没有大小的限制,也没有时间的限制。有固定的浏览器的存储位置。同一个浏览器可以共享。
                  都只能存储在浏览器。换了浏览器就没有。 

转载于:https://www.cnblogs.com/luoyao19910515/p/4805728.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值