直接po代码：cookie是和服务器进行交互使用的，所以不允许本地文件使用哟~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#block{
100px;
height: 100px;
background: orange;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="block"></div>
<script>
var tar=document.getElementById("block");
tar.style.left=getCookie("left");
tar.style.top=getCookie("top");
bindEvent(tar);
var flag=false;
var clickX,
clickY;
function bindEvent(tar){
attachEvent(tar, "mousedown",function(e){
flag=true;
// 计算点击时鼠标在方块里的坐标
clickX=e.clientX-parseInt(getStyle(tar,"left"));
clickY=e.clientY-parseInt(getStyle(tar,"top"));
});
attachEvent(document, "mousemove", move);
attachEvent(tar, "mouseup",function(e){
flag=false;
});
}
function move(e){
if(flag){
// 此时计算方块被拖拽后的定位
tar.style.left=e.clientX-clickX+"px";
tar.style.top=e.clientY-clickY+"px";
// 记住每次位置
setCookie("left",tar.style.left,1000);
setCookie("top",tar.style.top,1000);
}
}
function setCookie(key,value,date){
document.cookie=key+"="+value+" ;max-age="+date;
}
function getCookie(key){
console.log(document.cookie);//"left=442px; top=157px"
var arr=document.cookie.split("; ");
for(var i=0;i<arr.length;i++){
var cookieItem=arr[i].split("=");
if(cookieItem[0]===key){
return cookieItem[1];
}
}
}
// 获取样式
function getStyle(obj, prop, fake) {
// fake伪元素
var fake = fake || null;
if(obj.currentStyle) {
return obj.currentStyle[prop];
}else {
return window.getComputedStyle(obj, fake)[prop];
}
}
// 绑定函数
function attachEvent(ele, type, handle) {
if (ele.addEventListener) {
ele.addEventListener(type, handle, null);
}else if (ele.attachEvent) {
ele['temp' + type + handle] = handle;
ele[type + handle] = function () {
ele['temp' + type + handle].call(ele);
};
ele.attachEvent('on' + type, ele[type + handle]);
}else {
ele['on' + type] = handle;
}
}
</script>
</body>
</html>