1

Webサイトにドラッグ可能なツールバーがあります。ただし、ユーザーが現在のページを更新/終了すると、ツールバーは開始点に戻ります。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.jsjQueryをロードした直後にロードする必要があります。

この拡張機能はjQuery1.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 に答える