事件
dragstart
按下鼠标按键 并开始移动鼠标 会触发dragstart事件 我们通过ondragstart来调用方法
drag
当dragstart开始 会持续触发drag事件 类似mousemove事件
dragend
当拖放停止时(鼠标按键抬起时) 会触发
dragenter
拖动元素被拖动到放置元素上
dragover
拖动元素在放置元素范围内移动
dragleave
拖动元素从放置元素上移出
drop
放置事件
拖放事件 生命周期
dragstart>drag>dragenter>dragover>drop>dragend
数据交互
通过dataTransfer去保存 获取数据 只能在拖放事件处理程序中使用
event.dataTransfer
方法:
dataTransfer.setData(key,value);
dataTransfer.getData(key);
定义放置目标
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
定义拖动元素
<img id="img" draggable="true" ondragstart="drag(event)">
Web前端本地存储
1.Cookies-----存储到浏览器中 面向服务器 同一服务器可以共享cookies 产生于服务器端 4kb
cookies.set()
根据给定cookie数据设置一个cookie;如果同样的cookie存在讲会覆盖
cookies.get()
返回一个单独的 cookie 的信息
cookies.remove()
根据名字删除cookie
2.webStorage
2.1sessionStorage ------会话存储 选项卡 浏览器关闭 会话失效–推荐使用
setItem('name','zhangan');
getItem('name');
clear('name');//清空属性值
removeItem('name')//全部清空
2.2localStorage-------本地存储 本地磁盘中 手动清除 浏览器选项卡关闭不会失效
setItem('name','zhangan');
getItem('name');
clear('name');//清空属性值;
removeItem('name')//全部清空;
WebScoket
实时的 长连接的一个
非http协议的一种全双工通讯方式 ws协议
需要服务器的支持