Помните положение и размер в печенье - PullRequest
Новая
       8

Помните положение и размер в печенье

1 голос
/ 01 августа 2011

Понятия не имею, что делать. Пожалуйста, помогите.

Я создал сайт с перетаскиваемыми масштабируемыми элементами на странице. Вы можете увидеть, что я сделал здесь ... http://www.hagueandhague.co.uk/test/hagueandhague/httpdocs/index.html

Используется скрипт Java из ... http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js

Мне нужно, чтобы сайт запомнил положение и масштаб предметов, чтобы при возвращении посетителей на сайт они оставляли их там.

Я считаю, что эту информацию можно сохранить в cookie, однако я понятия не имею, как это сделать или заставить ее работать.

Любая помощь будет отличной, но даже лучше, если она будет на английском / непрофессионале.

Заранее спасибо.

Джеймс.

Ответы [ 3 ]

1 голос
/ 13 августа 2013 
    <script>
    $(document).ready(function(){
        $('.dragboard').draggable({
            stop: function(event, ui) {
                $.cookie('elementLeft', ui.position.left);
                $.cookie('elementTop', ui.position.top);
            }
        });
        $('.dragboard').css({left : parseInt($.cookie('elementLeft')), top : parseInt($.cookie('elementTop'))});
    });
    </script>
1 голос
/ 02 августа 2011

В терминах "непрофессионала" вы хотите использовать обратный вызов stop плагина Draggable, чтобы получить положение элемента и сохранить его в файле cookie, используя плагин cookie jQuery.Затем, когда пользователь вернется, прочитайте файл cookie и переместите элементы. 

$(".selector").draggable({
    stop: function(event, ui) {
        $.cookie("elementIDCookie", ui.position);
    }
});

Чтобы переместить элемент после возврата пользователя: 

$(".select").css( { "left" : $.cookie("elementIDCookie").left, "top" : $.cookie("elementIDCookie").top });

Дополнительная информация:

http://jqueryui.com/demos/draggable/

https://github.com/carhartl/jquery-cookie

0 голосов
/ 02 мая 2014

Это будет работать прямо из коробки - # pick-right - это div для перетаскивания.

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

     $(function () {
         $("#pick-right").draggable({ stop: function (event, ui) {
             $.cookie("rcpos", window.JSON.stringify(ui.position));
         }
         });
     });
...