1

我的网站上有一个工具栏，可以拖动。但是，如果用户刷新/离开当前页面，工具栏将返回其起点。我尝试了几件事，比如将 X/Y 位置保存在 cookie 中，但没有成功（由于缺乏 jQuery/Javascript 知识）。

这是我迄今为止尝试过的：

$(document).ready(function() {

var postoolbar = $.jCookies({ get : 'postoolbar' });//Get toolbar position

$(function() {
    $( "#toolbar" ).css("margin-left", $('#posX > span').text(xPos));
    $( "#toolbar" ).css("margin-top", $('#posy > span').text(yPos));
});


//Draggable toolbar
$(function() {
    $( "#toolbar" ).draggable(
        {
            drag: function(){
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $('#posX > span').text(xPos);
                $('#posY > span').text(yPos);
            },

            stop: function(event, ui) {

                $.jCookies({ //Create location toolbar cookie
                    name : 'postoolbar',
                    value : { xPos : $('#posX > span').text(xPos), yPos : $('#posY > span').text(yPos)},
                    hours: 3
                });

            }

        }

  );

});

});

检索 cookie：

var postoolbar = $.jCookies({ get : 'postoolbar' });//Get toolbar position

停止我的可拖动 jQuery。

我也很确定我做错了 CSS。

我希望你能帮助我:)

4

2 回答 2

1

从您的评论来看，您似乎没有安装 jCookie 扩展。

你可以从GitHub下载。您应该将jquery.jcookie.min.js文件保存在服务器上并在加载 jQuery 后立即加载它。

看起来这个扩展是为 jQuery 1.6.2 设计的，所以如果它被加载，但你仍然看到错误，尝试匹配你的 jQuery 版本。

设置 cookie 时，应从 .text() 中删除 xPos 和 yPos 变量。这是因为您已经设置了这些值，您现在只想读取它们。

value : { xPos : $('#posX > span').text(), yPos : $('#posY > span').text()}

检索 cookie 后，您将需要使用 cookie 数据来设置菜单位置，例如。

$( "#toolbar" ).css("margin-left", postToolbar.xPos + 'px');
$( "#toolbar" ).css("margin-top", postToolbar.yPos + 'px');
于 2013-01-09T10:04:11.003 回答
-1

我已经让它工作了，但是没有使用 jCookies。

http://www.quirksmode.org/js/cookies.html

$(document).ready(function() {

var ReadxPos = readCookie('Cookie_Toolbar_PosX')
var ReadyPos = readCookie('Cookie_Toolbar_PosY')
$( "#toolbar" ).css("margin-left", ReadxPos + 'px');
$( "#toolbar" ).css("margin-top", ReadyPos + 'px');

//Draggable toolbar
$(function() {
    $( "#toolbar" ).draggable(
        {
            drag: function(){
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $('#posX > span').text(xPos);
                $('#posY > span').text(yPos);
            },

            stop: function(event, ui) {
              var offset = $(this).offset();
              var xPos = offset.left;
              var yPos = offset.top;
              createCookie('Cookie_Toolbar_PosX', xPos, 0)
              createCookie('Cookie_Toolbar_PosY', yPos, 0)
            }

        }

  );

});
});
于 2013-01-09T12:11:50.373 回答