保存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的位置/位置

回答

相關問題