原生JS解决拖拽后刷新位置丢失问题
原生JS解决拖拽后刷新位置丢失问题
越陌度阡
发布于 2020-11-26 15:21:42
发布于 2020-11-26 15:21:42
在给页面中的元素时行拖拽时，如果拖拽到一半，页面刷新了，上一次拖拽的位置就会丢失，今天给大家分享一个小Demo，主要运用的localStorage来解决的这个问题，以下是代码实现，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS解决拖拽后刷新位置丢失问题</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
// 封装设置存储函数，name代表属性名，value代表属性值
function setStorage(name, value) {
var obj = {
value: value
};
localStorage.setItem(name, JSON.stringify(obj));
};
// 封装获取存储的位置
function getStorage(name) {
var obj = JSON.parse(localStorage.getItem(name));
return obj.value
};
// 删除Storage
function removeStorage(name) {
// 清空位置尺寸
localStorage.removeItem(name)
};
window.onload = function () {
var oDiv = document.getElementById('div1');
var disX = 0;
var disY = 0;
// 获取存的storage值(过时技术)
var x = getStorage('x');
var y = getStorage('y');
// 如果存在
if (x) {
oDiv.style.left = x + 'px';
oDiv.style.top = y + 'px';
}
oDiv.onmousedown = function (ev) {
// 事件兼容
var oEvent = ev || event;
// 计算鼠标相对于div左上角的位置
disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop;
// 必须要写onmousedown事件里面，以保证鼠标在div上摁住才能生效
// 必须要加在document上，否则拖快了拖出div了会失效
document.onmousemove = function (ev) {
// 事件兼容
var oEvent = ev || event;
// 计算新的div的位置
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if (l < 0) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
// 防止右边出界
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (t < 0) {
// 防止上边出界
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
// 防止下边出界
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
// 赋值给新位置
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
// 必须要写onmousedown事件里面，以保证鼠标在div上摁住才能生效
// 必须要加在document上，否则拖快了拖出div了会失效
document.onmouseup = function () {
// 清空事件
document.onmousemove = null;
document.onmouseup = null;
// 存储防止拖动后页面刷新位置还原
setStorage('x', oDiv.offsetLeft);
setStorage('y', oDiv.offsetTop);
};
// 防止在火狐3.6.19版本中拖动出现鼠标指针变形
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-08-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读