Jquery 保存在cookies中的可拖动定位

因此，我有一个div，cguts，它使用jquery切换可见性，并且可以在屏幕上拖动。我已经设法弄明白了如何使用cookies使可见性持久化，但我似乎无法掌握如何使div的位置在整个站点上也持久化

除了将div的位置从一个页面保存到下一个页面之外，以下代码适用于所有情况

$(document).ready(function () {   
        var cookieName = 'cvis';

        function setCookie(key, value) {
            var expires = new Date();
            expires.setTime(expires.getTime() + 31536000000); //1 year 
            document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
        }

        function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        }
        if (getCookie(cookieName) === '1') {
            $('#cguts').show();
            $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
        } else if (getCookie(cookieName) === '0') {
            $('#cguts').hide();
        } else {
            setCookie(cookieName, '1');
            $('#cguts').show();
            $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
        }
        $('.click').on('click', function () {
            if ($('#cguts').is(':visible')) {
                $('#cguts').fadeOut(300);
                setCookie(cookieName, '0');
            } else {
                $('#cguts').fadeIn(300);
                $('#cguts').draggable(function(event, ui) {
             var currentPos = $(this).position();
             var currentTop = Math.round(currentPos.top);

             // save cookie when stopped dragging
             $.cookie('position' + $(this).index('div').toString(), currentTop.toString());});
                setCookie(cookieName, '1');
            }
        });
    });

---

我现在的问题是我做错了什么？我怀疑问题出在Dragable中的cookie编码中，但我正式迷失了…

我想这就是您需要的

小提琴连杆

---

希望对你有所帮助。：）

我想这就是你需要的

小提琴连杆

---

希望能有所帮助：）

我最终从另一个方向处理了这件事，所以我想我会分享我最终的解决方案

我在文件开头添加了以下内容：

$(document).ready(function () {
     if ($.cookie("cvispos") != undefined) {
         var unwrapped = window.JSON.parse($.cookie("cvispos"));
         var left = window.JSON.parse($.cookie("cvispos")).left;
         var top = window.JSON.parse($.cookie("cvispos")).top;
         $("#cguts").css("left", left + "px");
         $("#cguts").css("top", top + "px");
     }
 });

然后将我的可拖动值更改为：

$( "#cguts" ).draggable({ stop: function (event, ui) {
         $.cookie("cvispos", window.JSON.stringify(ui.position));
     }
     });

---

这就像一种魅力。

我最终从一个不同的方向来处理这件事，所以我想我会分享我最终的解决方案

我在文件开头添加了以下内容：

$(document).ready(function () {
     if ($.cookie("cvispos") != undefined) {
         var unwrapped = window.JSON.parse($.cookie("cvispos"));
         var left = window.JSON.parse($.cookie("cvispos")).left;
         var top = window.JSON.parse($.cookie("cvispos")).top;
         $("#cguts").css("left", left + "px");
         $("#cguts").css("top", top + "px");
     }
 });

然后将我的可拖动值更改为：

$( "#cguts" ).draggable({ stop: function (event, ui) {
         $.cookie("cvispos", window.JSON.stringify(ui.position));
     }
     });

它就像一个符咒