图片拖动知识点
元素在拖动下 会触发以下事件
在被拖动目标上触发的事件
ondragstart——即用户开始拖动元素时触发
ondrag -——元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
在其他对象容器中触发的事件
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#result {
width: 300px;
height: 300px;
border: 1px solid coral;
margin-bottom: 30px;
}
</style>
<body>
<p>请将下面图片拖入到框中</p>
<!-- ondragstart:该事件表示拖放开始 -->
<!-- ondragover:该事件表示拖放结束
ondrag:该事件拖放过程 -->
<div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
<!-- draggable:值为true时表示元素可以拖动,默认为false,表示不能拖动 -->
<img id="adc" src="img/flower.jpg" alt="" draggable="true" ondragstart="drag(event)">
<script type="text/javascript">
//用于拖放函数
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//拖动过程
function drop(ev) {
//允许其他元素体拖带此处
ev.preventDefault();
//获取要拖放元素的id
var id = ev.dataTransfer.getData("text");
// 将一个标签添加到另一个标签中,可以使用appendChild();
ev.target.appendChild(document.getElementById(id));
}
//拖动结束
function allowDrag(ev) {
//允许其他元素体拖带此处
ev.preventDefault();
}
</script>
</body>
</html>
效果图
localstorage和sessionstorage区别及解释
sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage:将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。
这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。
生命周期
localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。
WebStorage的目的
是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。
WebStorage两个主要目标
提供一种在cookie之外存储会话数据的路径。(2)提供一种存储大量可以跨会话存在的数据的机制。
localStorage(本地存储)和sessionStorage(会话存储)。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点击" onclick="clickCout()">
<div id="result"></div>
<script type="text/javascript">
function clickCout() {
if (localStorage.click_num) {
localStorage.click_num = parseInt(localStorage.click_num) + 1;
} else {
localStorage.click_num = 1;
}
document.getElementById("result").innerHTML = localStorage.click_num;
}
</script>
</body>
</html>
效果图