HTML5拖拽元素和web存储

最新推荐文章于 2023-04-27 18:04:03 发布

honghuzhiyan

最新推荐文章于 2023-04-27 18:04:03 发布

阅读量286

点赞数 1

本文链接：https://blog.csdn.net/honghuzhiyan/article/details/103704405

版权

拖拽

任何元素都可以被拖拽，图片和超链接默认可以被拖拽。
需要为被拖拽的元素添加 draggable = “true” 属性。

拖拽触发的事件

被拖拽元素的事件
ondrag:整个拖拽过程一直被触发。
ondragstart:开始拖拽。
ondragend:拖拽结束。
目标元素事件
ondragenter:当拖拽元素进入目标元素。
ondragover:当被拖拽元素停留在目标元素上。
ondrop:当被拖拽元素在目标元素上松开鼠标时触发（默认不触发，需要更改浏览器默认事件）。
ondragleave:当被拖拽元素离开目标元素。

案例：讲div中的元素拖拽到另一个div中:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			border:1px solid #000;
			float: left;
			margin-left: 20px
		}
	</style>
</head>
<body>
	<div>
		<p draggable = "true">拖拽元素1</p>
		<p draggable = "true">拖拽元素2</p>
	</div>
	<div class="div"></div>
	<script>
		var obj = null;//存放被拖拽的元素
		document.ondragstart = function(e){//为页面绑定拖拽开始事件，保存被拖拽的元素
			obj  = e.target;
		}
		document.ondragover = function(e){
			e.preventDefault();//阻止浏览器默认事件
		}
		document.ondrop = function(e){
			e.target.appendChild(obj);//讲被拖拽元素添加到目标元素中
		};

	</script>
</body>
</html>

web存储

window.sessionStorage
window.localStorage

	以key-value的形式存储，kv对，键值对
		sessionStroage  会话级别的存储      数据存储只会在当前会话中，关闭浏览器数据消失
			SessionStroage.length   查看当前存储的数据个数
			SessionStroage['key'] = 'value'   存储一个数据
			var a = SessionStroage['key']     读取一个数据
			SessionStroage.getItem('key')   读取一个数据
			SessionStroage.setItem('key','value')  存储一个数据
			SessionStroage.removeItem('key')       删除指定数据
			SessionStroage.clear()                 删除所有数据
		localStroage    本地/跨会话存储     浏览器关闭数据依然存在
			localStroage.length   查看当前存储的数据个数
			localStroage['key'] = 'value'   存储一个数据
			var a = localStroage['key']     读取一个数据
			localStroage.getItem('key')   读取一个数据
			localStroage.setItem('key','value')  存储一个数据
			localStroage.removeItem('key')       删除指定数据
			localStroage.clear()                 删除所有数据

honghuzhiyan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖拽元素和web存储

拖拽任何元素都可以被拖拽，图片和超链接默认可以被拖拽。需要为被拖拽的元素添加 draggable = “true” 属性。拖拽触发的事件被拖拽元素的事件ondrag:整个拖拽过程一直被触发。ondragstart:开始拖拽。ondragend:拖拽结束。目标元素事件ondragenter:当拖拽元素进入目标元素。ondragover:当被拖拽元素停留在目标元素上。ondrop...
复制链接

扫一扫