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(属性) 不需要值就行
H5中的拖拽和localStorage-----sessionStorage的区别
最新推荐文章于 2024-10-26 15:19:03 发布
本文介绍如何在网页中实现元素的拖拽功能,包括拖拽元素与目标元素的事件处理,以及如何使用sessionStorage和localStorage进行数据的临时与持久化存储。

519

被折叠的 条评论
为什么被折叠?



