H5中的拖拽和localStorage-----sessionStorage的区别

本文介绍如何在网页中实现元素的拖拽功能,包括拖拽元素与目标元素的事件处理,以及如何使用sessionStorage和localStorage进行数据的临时与持久化存储。

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

1.拖拽
这里要把拖拽的元素加一个属性就可以了(draggable=“true”),
对于拖拽的元素来说有三个触发事件:开始,过程,结束。
对应的方法是:ondragstart ondrag ondragend
对于目标元素来说有四个触发事件: 被进入 悬停上方 (这个是只要进入元素目标就会持续触发) 离开目标元素触发 松开鼠标元素进入到目标 四个事件是:ondragenter ondragover ondragleave ondrop
这里把元素拖拽出来还有存个变量 去获取它,这里的 event.target 就可以去接收元素 over结束时候有个return false去取消它的默认样式(阻止事件默认行为)
2关于储存数据(这里用input做例子)

获取点击事件,里边是接收存放input的value值,然后是设置变量接受值和属性
window.sessionStorage.setItem(属性,值) 或者是window.localStorage.setItem(属性,值)
前者是只保存数据一次,关掉页面不保存,后者是一直保存数据,除非删除数据。
再获取事件,里边 window.sessionStorage.getItem 或者 window.localStorage.getItem(属性) 不需要值就行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值