拖拽小方块和cookie的结合

直接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>

 

posted @ 2018-05-20 17:50  shellyxiao  阅读(172)  评论(0)    收藏  举报