直接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{ width: 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>