HTML5中的拖拽、地理位置和存储等

短命女 2021-12-05 05:07 290阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

--------------------

### 文章目录 ###

*  1.基础
 *  2.拖拽
 *   *  2.1 拖拽元素
     *  2.2 目标元素
 *  2.历史
 *  3.地理定位
 *  4.全屏
 *  5.Web存储
 *   *  5.1 常见API
     *  5.2 网络状态

# 1.基础 #

*  拖拽
 *  历史
 *  地理位置
 *  全屏

# 2.拖拽 #

图片和链接是默认开启拖拽的

## 2.1 拖拽元素 ##

*  通过上述设置可以使box1实现拖拽，但是拖拽后要做是么事情呢？涉及到事件监听！

拖拽元素的事件监听：

*  ondragstart 当拖拽开始时调用
 *  ondragleave 当鼠标离开拖拽元素时调用
 *  ondragend 当拖拽结束时调用
 *  ondrag 整个拖拽过程都会调用

box.ondragstart = function () { //拖拽开始
        ······
        }
    box.ondragleave =   //拖拽离开
    box.ondragend= //结束
    box.ondrag=   //拖拽中

## 2.2 目标元素 ##

*  概念：想把元素A拖拽到元素B里，那么元素B就是目标元素。

目标元素的事件监听：

*  ondragenter 当拖拽元素进入时调用
 *  ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
 *  ondrop 当在目标元素上松开鼠标时调用
 *  ondragleave 当鼠标离开目标元素时调用

two.ondragenter=function () { //被拖元素进入触发
        ······
        }
    two.ondragleave
    two.ondragover=function (e) { //在目标盒子内，连续触发
    	 e.preventDefault(); //一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
    }
     two.ondrop //松开鼠标

# 2.历史 #

*  原因：界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
 *  解决：通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态
 *  window.history.forward(); // 前进
 *  window.history.back(); // 后退
 *  window.history.go(); // 刷新
 *  通过JS可以加入一个访问状态 history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)

# 3.地理定位 #

基于位置服务

获取地理信息的方式：

*  IP地址
 *  三维坐标：（1）GPS;（2）wifi定位；（3）手机信号定位；
 *  用户自定义数据

隐私：必须先得到用户明确许可，才能获取用户的位置信息。

# 4.全屏 #

*  允许用户自定义网页上任一元素全屏显示。
 *  方法：

requestFullscreen()   //让元素开启全屏显示
    cancleFullscreen()    //让元素关闭全屏显示

*  检测是否处于全屏：

document.fullScreen

*  全屏伪类：当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。

:full-screen .box { }
    :-webkit-full-screen { }
    :moz-full-screen { }