这个拖动后刷新页面不能保存拖动后的位置，求大神们给加上一个能保存位置的Cookie

javascriptcookiecsshtml

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">  
    #main div{position:absolute;width:40px;height:20px;border:1px solid #999;}  
    </style>  
    <script type="text/javascript">  
    var a;  
    document.onmouseup=function(){if(!a)return;document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);a="";};  
    document.onmousemove=function (d){if(!a)return;if(!d)d=event;a.style.left=(d.clientX-b)+"px";a.style.top=(d.clientY-c)+"px";

    //输出内容 ;         
    document.getElementById("output").value= a.id + " 左边：" + a.style.left +" 顶部：" + a.style.top 
    setCookie(a.id,a.style.left+','+ a.style.top,3);
    };  
    function $(o,e){a=o;document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);b=e.clientX-parseInt(a.style.left);c=e.clientY-parseInt(a.style.top);}  
    window.onload=function()
    {
    var aDiv=document.getElementsByTagName('div');
    for(var i=0;i<aDiv.length;i++)
    {
    var tmp=getCookie(aDiv[i].id);
    if(tmp)
    {
    var posArr=tmp.split(',');
    aDiv[i].style.left=posArr[0];
    aDiv[i].style.top=posArr[1];
    }
    }
    }
    function setCookie(key,value,expires)
    {
    var date=new Date();
    date.setDate(date.getDate()+expires);
    document.cookie=key+'='+ encodeURI(value)+'; expires='+date.toGMTString();
    }
    function getCookie(key)
    {
    var reg=new RegExp('(?:^|\\s)'+key+'\s*?=([^;]+)');
    return document.cookie.match(reg)?decodeURI(document.cookie.match(reg)[1]):'';
    }
    </script>  
    </head>  
    <body>  
      <div id="main">
        <div id="div1" style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">节点1</div>  
        <div id="div2" style="left:150px;top:100px;background:#9cf;" onmousedown="$(this,event)">节点2</div>  
        <div id="div3" style="left:200px;top:100px;background:#f9c;" onmousedown="$(this,event)">节点3</div>  
        <div id="div4" style="left:250px;top:100px;background:#9fc;" onmousedown="$(this,event)">节点4</div>  
        <div id="div5" style="left:300px;top:100px;background:#c9f;" onmousedown="$(this,event)">节点5</div>  
        <div id="div6" style="left:350px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点6</div>
        <div id="div7" style="left:400px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点7</div>
        <div id="div8" style="left:450px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点8</div>
        <div id="div9" style="left:500px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点9</div>
        <div id="div10" style="left:550px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点10</div>
        <div id="div11" style="left:600px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点11</div>
        <div id="div12" style="left:100px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点12</div>
        <div id="div13" style="left:150px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点13</div>
        <div id="div14" style="left:200px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点14</div>
        <div id="div15" style="left:250px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点15</div>
        <div id="div16" style="left:300px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点16</div>
        <div id="div17" style="left:350px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点17</div>
        <div id="div18" style="left:400px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点18</div>
        <div id="div19" style="left:450px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点19</div>
        <div id="div20" style="left:500px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点20</div>
        <div id="div21" style="left:550px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点21</div>
        <div id="div22" style="left:600px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点22</div>
        <div id="div23" style="left:100px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点23</div>
        <div id="div24" style="left:150px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点24</div>
        <div id="div25" style="left:200px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点25</div>
        <div id="div26" style="left:250px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点26</div>
        <div id="div27" style="left:300px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点27</div>
        <div id="div28" style="left:350px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点28</div>
        <div id="div29" style="left:400px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点29</div>
        <div id="div30" style="left:450px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点30</div>
        <div id="div31" style="left:500px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点31</div>
        <div id="div32" style="left:550px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点32</div>
        <div id="div33" style="left:600px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点33</div>
      </div>  
      <div style="left:700px;top:300px;background:#cf9;" id="output1"> <input id="output" value="aaaa" size="30"/>  </div> 
    </body>  
    </html>  
      

  2.   

    这能有什么原理，利用cookie记录位置，然后页面加载的 时候根据cookie记录的位置，把每个div的位置设定好即可也许如何实现拖拽会更有意义拖拽的三大事件 mousedown mousemove mouseup
      

  3.   

    获取位置信息保存到cookie或者浏览器存储对象（大量数据）中就行了，window.onload中从cookie中加载信息<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <style type="text/css">  
    #main div{position:absolute;width:40px;height:20px;border:1px solid #999;}  
    </style>  
    <script type="text/javascript">
        var a;
        document.onmouseup = function () { if (!a) return; document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); a = ""; };
        document.onmousemove = function (d) {
            if (!a) return; if (!d) d = event; a.style.left = (d.clientX - b) + "px"; a.style.top = (d.clientY - c) + "px";        //输出内容 ;         
            document.getElementById("output").value = a.id + " 左边：" + a.style.left + " 顶部：" + a.style.top
        };
        function $(o, e) { a = o; document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE); b = e.clientX - parseInt(a.style.left); c = e.clientY - parseInt(a.style.top); }
        window.onbeforeunload = function () {//离开页面前保存位置数据
            var dvs = document.getElementById('main').getElementsByTagName('div'), pos = [];
            for (var i = 0; i < dvs.length; i++) pos.push('{l:' + dvs[i].style.left.replace('px', '') + ',t:' + dvs[i].style.top.replace('px', '') + '}');
            pos = '[' + pos.join(',') + ']';
            var d = new Date(); d.setFullYear(d.getFullYear() + 1); //cookie有效期1年
            document.cookie = 'pos=' + encodeURIComponent(pos) + ';expires=' + d.toGMTString();
        }
        window.onload = function () {//加载页面后初始化位置
            var pos = /pos=([^;]+)/.exec(document.cookie);
            if (pos) {
                pos = eval('(' + decodeURIComponent(pos[1]) + ')');
                var dvs = document.getElementById('main').getElementsByTagName('div');
                for (var i = 0; i < dvs.length; i++) {
                    dvs[i].style.left = pos[i].l + 'px';
                    dvs[i].style.top = pos[i].t + 'px';
                }
            }
        }
    </script>  
    </head>  
    <body>  
      <div id="main">
        <div id="div1" style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">节点1</div>  
        <div id="div2" style="left:150px;top:100px;background:#9cf;" onmousedown="$(this,event)">节点2</div>  
        <div id="div3" style="left:200px;top:100px;background:#f9c;" onmousedown="$(this,event)">节点3</div>  
        <div id="div4" style="left:250px;top:100px;background:#9fc;" onmousedown="$(this,event)">节点4</div>  
        <div id="div5" style="left:300px;top:100px;background:#c9f;" onmousedown="$(this,event)">节点5</div>  
        <div id="div6" style="left:350px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点6</div>
        <div id="div7" style="left:400px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点7</div>
        <div id="div8" style="left:450px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点8</div>
        <div id="div9" style="left:500px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点9</div>
        <div id="div10" style="left:550px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点10</div>
        <div id="div11" style="left:600px;top:100px;background:#cf9;" onmousedown="$(this,event)">节点11</div>
        <div id="div12" style="left:100px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点12</div>
        <div id="div13" style="left:150px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点13</div>
        <div id="div14" style="left:200px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点14</div>
        <div id="div15" style="left:250px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点15</div>
        <div id="div16" style="left:300px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点16</div>
        <div id="div17" style="left:350px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点17</div>
        <div id="div18" style="left:400px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点18</div>
        <div id="div19" style="left:450px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点19</div>
        <div id="div20" style="left:500px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点20</div>
        <div id="div21" style="left:550px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点21</div>
        <div id="div22" style="left:600px;top:200px;background:#cf9;" onmousedown="$(this,event)">节点22</div>
        <div id="div23" style="left:100px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点23</div>
        <div id="div24" style="left:150px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点24</div>
        <div id="div25" style="left:200px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点25</div>
        <div id="div26" style="left:250px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点26</div>
        <div id="div27" style="left:300px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点27</div>
        <div id="div28" style="left:350px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点28</div>
        <div id="div29" style="left:400px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点29</div>
        <div id="div30" style="left:450px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点30</div>
        <div id="div31" style="left:500px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点31</div>
        <div id="div32" style="left:550px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点32</div>
        <div id="div33" style="left:600px;top:300px;background:#cf9;" onmousedown="$(this,event)">节点33</div>
      </div>  
      <div style="left:700px;top:300px;background:#cf9;" id="output1"> <input id="output" value="aaaa" size="30"/>  </div> 
    </body>  
    </html>