html中的拖放、Web Storage存储、Geolocation 接口

最新推荐文章于 2024-10-09 11:42:00 发布

积点德

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量85

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_67883007/article/details/128412958

版权

1..

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events。

一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。

下面的表格提供了一个简短的事件类型描述：

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

[注意] 当从操作系统向浏览器中拖拽文件时，不会触发 dragstart 和 dragend 事件。

下面通过一个简单的示例来讲解拖放事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件</title>
		<style>
			.box {
				width: 262px;
				height: 46px;
				padding: 15px;
				border: 2px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img id="logo" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="262" height="46">
		</div>
		<br />
		<div id="div2" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("text/plain", ev.target.id);
			}

			function drop(ev) {
				ev.preventDefault();
				var id = ev.dataTransfer.getData("text/plain");
				ev.target.appendChild(document.getElementById(id));
			}
		</script>
	</body>
</html>

2.Geolocation 接口

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让 Web 内容访问到设备的地理位置（经纬度），这将允许 Web 应用基于用户的地理位置提供定制的信息。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

2.1使用 getCurrentPosition() 方法来获取设备当前位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地理位置</title>
	</head>
	<body>
		<p>点击按钮获取您当前位置：</p>
		<button onclick="getPosition()">点我</button>
		<p>您的位置是：</p>
		<p id="response"></p>
		<script>
			var response = document.getElementById('response');

			var options = {
				enableHighAccuracy: true, // 启用高精度
				timeout: 5000 // 定位超时时间，超时时间内一定返回结果
			}
			
			/**
			 * 获取地理位置
			 */
			function getPosition() {
				// 检测浏览器是否支持地理定位
				if (navigator.geolocation) {
					// 浏览器支持，获取地理位置
					navigator.geolocation.getCurrentPosition(success, error, options);
				} else {
					// 浏览器不支持，提示用户
					response.innerText = '您的浏览器不支持获取地理位置。';
				}
			}
			
			/**
			 * 获取成功
			 * @param {Object} result 返回的结果
			 */
			function success(result) {
				response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
			}
			
			/**
			 * 获取失败
			 * @param {Object} error 异常信息
			 */
			function error(error) {
				console.log(error);
			}
		</script>
	</body>
</html>

2.2 返回数据

若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：

属性	描述
coords.latitude	以十进制度数表示纬度的双精度值。
coords.longitude	以十进制度数表示经度的双精度值。
coords.accuracy	表示纬度和经度属性精度的双精度值，单位为米。
coords.altitude	表示该位置相对于海平面的高度的双经度值。如果无法提供数据，则此值可以为空。
coords.altitudeAccuracy	表示高度属性精度的双精度值，单位为米。
coords.heading	表示设备运行方向的双精度值。该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。
coords.speed	表示设备运行速度的双精度值，单位为米/每秒。
timestamp	获取到位置的时间（时间戳）。

2.3 异常处理

getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

可能返回的错误码：

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
3	TIMEOUT	获取地理位置超时，通过定义 `PositionOptions.timeout` 来设置获取地理位置的超时时长。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地理位置</title>
	</head>
	<body>
		<p>点击按钮获取您当前位置：</p>
		<button onclick="getPosition()">点我</button>
		<p>您的位置是：</p>
		<p id="response"></p>
		<script>
			var response = document.getElementById('response');

			var options = {
				enableHighAccuracy: false, // 启用高精度
				timeout: 5000 // 定位超时时间，超时时间内一定返回结果
			}

			/**
			 * 获取地理位置
			 */
			function getPosition() {
				// 检测浏览器是否支持地理定位
				if (navigator.geolocation) {
					// 浏览器支持，获取地理位置
					navigator.geolocation.getCurrentPosition(success, error, options);
				} else {
					// 浏览器不支持，提示用户
					response.innerText = '您的浏览器不支持获取地理位置。';
				}
			}

			/**
			 * 获取成功
			 * @param {Object} result 返回的结果
			 */
			function success(result) {
				response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
			}

			/**
			 * 获取失败
			 * @param {Object} error 异常信息
			 */
			function error(error) {
				switch (error.code) {
					case error.PERMISSION_DENIED:
						response.innerText = '没有获取地理位置信息的权限。';
						break
					case error.POSITION_UNAVAILABLE:
						response.innerText = '地理位置获取失败。';
						break;
					case error.TIMEOUT:
						response.innerText = '获取地理位置超时。';
						break;
					default:
						break;
				}
			}
		</script>
	</body>
</html>

3.Web Storage存储

设置数据和读取数据比较方便。
容量较大，sessionStorage 约 5M，localStorage 约 20M。
只能存储字符串，如果要存储 JSON 对象，可以使用 window.JSON 对象的 stringify() 方法和 parse() 方法进行序列化和反序列化。

localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储和移除字符串</title>
	</head>
	<body>
		<button onclick="save()">存储</button>
		<button onclick="read()">读取</button>
		<button onclick="remove()">移除</button>
		<p>存储的值：<span id="result"></span></p>
		<script>
			function save() {
				// 存储字符串
				localStorage.sitename = '百度一下';
			}

			function read() {
				// 读取字符串
				document.getElementById('result').innerText = localStorage.sitename;
			}

			function remove() {
				// 移除字符串
				localStorage.removeItem('sitename');
			}
		</script>
	</body>
</html>

sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计数器</title>
		<style>
			input[type="number"] {
				width: 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<span>计数器：</span>
		<button onclick="add()">+</button>
		<input type="number" id="result" value="0" readonly="readonly" />
		<button onclick="sub()">-</button>
		<script>
			var number = 0;
			var result = document.getElementById('result');

			// 页面加载事件
			window.onload = function() {
				if (typeof(Storage) !== 'undefined') {
					// 读取本地存储的数量
					var str = sessionStorage.getItem('number');
					if (str) {
						number = parseInt(str);
						result.value = number;
					}
				}
			}

			// 加数量
			function add() {
				number = number + 1;
				sessionStorage.setItem('number', number); // 存储
				result.value = number;
			}

			// 减数量
			function sub() {
				if (number == 0) {
					return;
				}
				number = number - 1;
				sessionStorage.setItem('number', number); // 存储
				result.value = number;
			}
		</script>
	</body>
</html>