关于页面重新加载调用COOKIES的问题

1.页面有一个可移动的DIV(页面第一次加载默认CSS样式LEFT:100PX;TOP:100pX).通过鼠标按下,移动,弹起后.可移动DIV的新坐标如(LEFT:300PX;TOP:200PX)=>通过COOKIES保存这个新坐标.2.没有关闭浏览器的情况下,页面重新刷新后,如何调用COOKIES保存的坐标并赋值给这个可移动的DIV,让这个DIV的默认样式为(LEFT:300PX;TOP:200PX)而不是(LEFT:100PX;TOP:100pX),我应该怎么做呢?

解决方案 »

  1.   

    1.
    $.cookie('left','300');
    $.cookie('top','200');2.
    if($.cookie('left') && $.cookie('right')) {
        $('div').css('left',$.cookie('left')+'px');
        $('div').css('top',$.cookie('right')+'px');
    }
      

  2.   

    回1楼，这是我的移动DIV代码:你的这段代码加在哪里才可以达到我要的效果？<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Index</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        // 拖拽与发送实现        $(document).ready(function () {
                //拖拽
                var _move = false; //移动标记
                var _x, _y;
                var index_x, index_y;            $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
                $(document).bind("mousemove", mmove); //鼠标移动事件绑定
                $(document).bind("mouseup", mup); //鼠标弹起事件绑定
                function mmove(e) {
                    if (_move) {
                        var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                        var y = e.pageY - _y;
                        $("#drag").css({ top: y, left: x }); //div新位置
                          $.cookie('left',x);
                        $.cookie('top',y);
                                        }
                }
                function mup() {
                    _move = false;
               }
                function downIndex(e) {
                    _move = true;
                    _x = e.pageX - parseInt($("#drag").css("left"));
                    _y = e.pageY - parseInt($("#drag").css("top"));            }
                function show(x, y) {
                    document.getElementById("result").innerHTML ="x坐标为："+x+"</br>"+"y坐标为："+y+"</br>"+"(注：这是div左顶点的坐标)";
                }
            });
    </script>
    <style type="text/css">
            .dragg
            {
                border: 1px solid #aeeeee; 
                width: 400px;
                height: 300px;
                cursor: move;
                position: absolute;
                left:0;
                top: 0;
            }
        </style>
    </head>
    <body>
    <div class="dragg" id="drag">
    <div id="result" style="background-color:#afffff; height:200px"></div>
    </div> </body>
    </html>
      

  3.   

    1 你已经加了。
    2 一般加在$(document).ready(function () {里面或随便找个地方加也行。
      

  4.   

    回3楼朋友,是这样子添加吗?
    [code=csharp]
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Index</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        // 拖拽与发送实现        $(document).ready(function () {
                //拖拽
                var _move = false; //移动标记
                var _x, _y;
                var index_x, index_y;            $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
                $(document).bind("mousemove", mmove); //鼠标移动事件绑定
                $(document).bind("mouseup", mup); //鼠标弹起事件绑定
                function mmove(e) {
                    if (_move) {
                        var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                        var y = e.pageY - _y;
                        $("#drag").css({ top: y, left: x }); //div新位置
                          $.cookie('left',x);
                        $.cookie('top',y);
                                        }
                }
                function mup() {
                    _move = false;
               }
                function downIndex(e) {
                    _move = true;
                    _x = e.pageX - parseInt($("#drag").css("left"));
                    _y = e.pageY - parseInt($("#drag").css("top"));            }
                }
            });
    $(document).ready(function () {
    if($.cookie('left') && $.cookie('top')) {
        $('div').css('left',$.cookie('left')+'px');
        $('div').css('top',$.cookie('top')+'px');
    } 
    }</script>
    <style type="text/css">
            .dragg
            {
                border: 1px solid #aeeeee; 
                width: 400px;
                height: 300px;
                cursor: move;
                position: absolute;
                left:0;
                top: 0;
            }
        </style>
    </head>
    <body>
    <div class="dragg" id="drag">
    <div id="result" style="background-color:#afffff; height:200px"></div>
    </div> </body>
    </html>[code]
      

  5.   

    我试了下,好像不行<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Index</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
        // 拖拽与发送实现        $(document).ready(function () {
                //拖拽
                var _move = false; //移动标记
                var _x, _y;
                var index_x, index_y;            $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
                $(document).bind("mousemove", mmove); //鼠标移动事件绑定
                $(document).bind("mouseup", mup); //鼠标弹起事件绑定
                function mmove(e) {
                    if (_move) {
                        var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                        var y = e.pageY - _y;
                        $("#drag").css({ top: y, left: x }); //div新位置
                          $.cookie('left',x);
                        $.cookie('top',y);
                                        }
                }
                function mup() {
                    _move = false;
               }
                function downIndex(e) {
                    _move = true;
                    _x = e.pageX - parseInt($("#drag").css("left"));
                    _y = e.pageY - parseInt($("#drag").css("top"));            }
    if($.cookie('left') && $.cookie('right')) {
        $('#drag').css('left',$.cookie('left')+'px');
        $('#drag').css('top',$.cookie('top')+'px');
    } 
            });
    </script>
    <style type="text/css">
            .dragg
            {
                border: 1px solid #aeeeee; 
                width: 400px;
                height: 300px;
                cursor: move;
                position: absolute;
                left:0;
                top: 0;
            }
        </style>
    </head>
    <body>
    <div class="dragg" id="drag">
    <div id="result" style="background-color:#afffff; height:200px"></div>
    </div> </body>
    </html>
      

  6.   

    把你的<script type="text/javascript">换成下面的就行了！！！<script type="text/javascript">
        // 拖拽与发送实现
            $(document).ready(function () {
                //拖拽
                var _move = false; //移动标记
                var _x, _y;
                var index_x, index_y;
     
                $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
                $(document).bind("mousemove", mmove); //鼠标移动事件绑定
                $(document).bind("mouseup", mup); //鼠标弹起事件绑定
                function mmove(e) {
                    if (_move) {
                        var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                        var y = e.pageY - _y;
                        $("#drag").css({ top: y, left: x }); //div新位置
                        SetCookie('left',x);
                        SetCookie('top',y);
                    }
                }
                function mup() {
                    _move = false;
               }
                function downIndex(e) {
                    _move = true;
                    _x = e.pageX - parseInt($("#drag").css("left"));
                    _y = e.pageY - parseInt($("#drag").css("top"));
     
                }
    if(GetCookie('left') && GetCookie('top')) {
        $('#drag').css('left',GetCookie('left')+'px');
        $('#drag').css('top',GetCookie('top')+'px');
    }
    function SetCookie (name, value) {
           var exp = new Date();
           exp.setTime (exp.getTime()+3600000000);
           document.cookie = name + "=" + value + "; expires=" + exp.toGMTString()+"; path=/";
    }
    function GetCookie(name) {
             var arg = name + "=";
             var alen = arg.length;
             var clen = document.cookie.length;
             var i = 0;
             while (i < clen) {
                 var j = i + alen;
                 if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
                 i = document.cookie.indexOf(" ", i) + 1;
                 if (i == 0) break;
             }
           return null;
      } 
    function getCookieVal(offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1) endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
     }
     
            });
    </script>