Question

我的网站上有一个可拖动的工具栏。但是，如果用户刷新/离开当前页面，则工具栏将返回其起始点。我尝试过几个方面，比如在cookie中保存X / Y位置，但没有成功（由于缺乏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。

我也很确定我做错了。

我希望你能帮帮我:)。

Answer 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');

Answer 2

我已经开始工作，但是没有使用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)
            }

        }

  );

});
});

在jCookie中保存可拖动div的位置/位置

2 个答案: