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

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

这是我试过到目前为止：

$(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错误。

我希望你能帮助我:)

来源

2013-01-09 Resitive

你确定你有jCookies扩展加载。当您加载页面时，控制台中显示什么内容以及何时单击以设置Cookie？您是否验证了Cookie实际上已被设置？ – PassKit

我得到这个错误：“TypeError：$ .jCookies不是一个函数”在我检索cookie的线上 – Resitive

-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-09 12:11:50 Resitive

从您的评论，看来你没有安装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-09 10:04:11 PassKit

据我所知，它链接正确。我使用这个：http://tympanus.net/codrops/2011/09/04/j-is-for-jcookies-http-cookie-handling-for-jquery/和它的链接是这样的： – Resitive

你能发布一个链接到你的页面，或者的HTML吗？ – PassKit

我在localhost a.t.m上运行它。可能是冲突，但这不会是我的第一个猜测。这是我的 – Resitive

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

回答

相关问题