Перемещаемое позиционирование, сохраненное в файлах cookie

Question

Итак, у меня есть div, cguts, который имеет видимость, переключенную с помощью jquery, и перетаскивается на экран. Мне удалось выяснить, как использовать файлы cookie для обеспечения видимости, чтобы быть постоянным, но я не могу понять, как заставить позицию 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'); 
      } 
     }); 
    }); 

Мой вопрос в том, что я делаю неправильно? Я подозреваю, что проблема заключается в кодировании печенья в перетаскиваемом, но я официально потерял ...

Answer 1

Я думаю, что это то, что вам нужно

скрипку ссылка https://jsfiddle.net/k414mtmt/2/

$('#cguts').draggable({ 

    drag: function(event, ui) { 

    var currentPos = $(this).position(); 
    var currentTop = Math.round(currentPos.top); 

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

надежда этого help .. :)

Answer 2

В конце концов я подошел к делу с другого направления, поэтому я решил поделиться тем, что в конечном итоге стало моим решением.

Я добавил следующее в начало файла:

$(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)); 
    } 
    }); 

И он работал как шарм.