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

Question

我的网站上有一个可拖动的工具栏。但是，如果用户刷新/离开当前页面，工具栏将返回到其起点。我尝试了一些方法，例如将 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 做错了。

希望你能帮我:)

Answer 1

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

您可以从GitHub下载if 。您应该将 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');