1.事件
1.1 online 网络连通监听
1.2 offline 网络断开监听
1.2.1使用 1.3全屏接口
1.3.1 使用 盒子.requestFullScreen()开启全屏显示
1.3.2退出全屏 document.rexitFullScreen()只能用document调用
1.3.3 是否是全屏状态documentfullScreenElement只能用document调用
1.3.4示例:
1.4拖拽接口
要成为拖拽元素则在对应标签上添加draggable=true (图片与超链接不需要添加,因为其默认即可拖拽)
拖拽生命周期
拖拽元素的事件:
1.ondrag 拖拽整个过程
2. ondragstart 拖拽开始
3. ondragleave鼠标离开拖拽元素时
4. ondragend拖拽结束时调用
使用:js里面 要拖拽元素的父盒子.ondrag =(){}
目标元素事件:
1.ondragenter 拖拽元素进入时调用
2. ondragover 当停留在目标元素上调用
3. ondrop 当目标元素上松开鼠标时调用
3.1 浏览器默认阻止ondrop 事件 解决办法是在ondragover事件中:
4. ondragleave当鼠标离开目标元素时调用
示例:
1.实现两个框相之间互拖拽:2.实现任意元素之间的拖拽(原理是通过事件的参数event来获取当前点击的对象,通过target获取其id值,然后进行操作):
3.上面示例改进:将获取的单击对象id值存放到dataTransfer里面,避免全局污染
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020012610260824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQ1MjcyNg==,size_16,color_FFFFFF,t_70