В комментариях к статье «Пользовательские интерфейсы jQuery: свободно перемещаемый контент» меня спрашивали как «запомнить» измененное положение элементов на странице. Наверное наиболее простым решением будет использование COOKIES, тем более, что для библиотеки jQuery написан плагин, который позволяет очень просто ставить, получать и удалять COOKIES’ы.
Для демонстрации я использовал почти тот же самый пример, что и в упомянутой выше статье, дополнив его подключением еще одного файла:

<script src="js/jquery.cookie.js" type="text/javascript"></script>

и добавил три кнопки, с помощью которых можно поставить, удалить или посмотреть cookies.

Попробуйте потестировать пример. При первой загрузке элементы DIV и P займут положение, определенное для них в стилевой таблице. Измените их положение и нажмите кнопку «Ставим COOKIE». Теперь перезагрузите страницу и элементы DIV и P займут уже новое положение, то которое Вы сохранили в cookie. Правда я добавил еще немного анимации в пример, поэтому перемещенные элементы не сразу появляются на новых позициях, а в течение некоторого времени перемещаются туда (это будет хорошо видно, если Вы повторите пример на отдельной странице, а у меня он загружается во фрейме). Если Вы нажмете кнопку «Удаляем COOKIE» и после этого перезагрузите страницу – элементы DIV и P будут занимать положение «по умолчанию». Ну а при нажатии на кнопку «Получаем COOKIE» выскочит окошко с текущими значениями cookie.

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Я не буду полностью приводить CSS и HTML-код, так как он не представляет особенного интереса. Отмечу только, что в примере используются идентификаторы элементов. А вот сам JavaScript-код разберем немного подробнее.

Как обычно, чтобы отследить момент готовности DOM, «обернем» весь наш код в

<script type="text/javascript">
  $(document).ready(function(){
  // тут пишем код
  });
</script>

Далее я привожу кусочек кода, который отвечает за перемещение элементов. Пояснять я его не буду, поскольку подробные объяснения можно найти в статье «Пользовательские интерфейсы jQuery: свободно перемещаемый контент«.

$(".block").draggable({
  revert: false,
  zIndex:1000,
  drag: function(e,ui) {
    $(this).css("background-color","#E2F2E2");
  },
  stop: function(e,ui) {
    $(this).css("background-color", "#58AEFC");
  }
});

А вот как ставить, удалять и получать cookie – разберем подробно.

Ставим COOKIE
С плагином к jQuery это довольно просто:

$.cookie("the_cookie", "the_value");

но давайте посмотрим на реальный пример (наверное код можно было бы несколько оптимизировать, но я специально «развернул» его для наглядности).

$("#setCookie").click(function () {
  var div = $("#draggableDiv").offset();
  var pos_div = div.left + ":" + div.top;
  var p = $("#draggableP").offset();
  var pos_p = p.left + ":" + p.top;
  $.cookie("draggableDiv", pos_div);
  $.cookie("draggableP", pos_p);
});

Итак, #setCookie – это кнопка при клике на которой совершаются следующие действия:
- с помощью метода offset() в переменную div помещается объект, который содержит свойства top и left для элемента #draggableDiv;
- обращаясь к свойствам top и left, запишем в переменную pos_div строку, содержащую соответствующие значения через какой-либо разделитель;
- проделаем те же самые операции для элемента #draggableP;
- и наконец установим cookies;

Довольно просто, не правда ли? Но мы можем передавать и дополнительные параметры:

$.cookie("the_cookie", "the_value", {
  expires: 7,
  path: "/",
  domain: "jquery.com",
  secure: true
});

Удаляем COOKIE
Вообще проще простого:

$.cookie("the_cookie", null);

Т.е. просто записываем cookie со значением null. Но давайте все-таки посмотрим, как это сделано в примере:

$("#delCookie").click(function () {
  $.cookie("draggableDiv", null);
  $.cookie("draggableP", null);
});

#delCookie – это кнопка, по клику на которой будет записан cookie с именем draggableDiv и значением null. То же самое будет сделано и для cookie с именем draggableP.

Получаем COOKIE

$.cookie("the_cookie");

Разве можно написать что-нибудь более лаконичное? Опять посмотрим, как в реальном примере:

$("#getCookie").click(function () {
  var getDiv = $.cookie("draggableDiv");
  var getP = $.cookie("draggableP");
  alert("Cookie draggableDiv: " + getDiv +
  " и Cookie draggableP: " + getP);
});

#getCookie – кнопка, по клику на которой получаем cookies с именами draggableDiv и draggableP, сохраняем их в переменных и выводим в alert().

Вроде бы все понятно, осталось только пояснить, как же все-таки элементы при перезагрузке страницы перемещаются (используется метод animate()) на нужные позиции. Это тоже несложно. В момент готовности DOM, который мы отслеживаем, выполняется следующий код:

if($.cookie("draggableDiv")) {
  var div = $.cookie("draggableDiv");
  var pos_div = div.split(":");
  $("#draggableDiv").animate({
    left: pos_div[0],
    top: pos_div[1]
  }, 500 );
}

Выполняем проверку cookie с именем draggableDiv и если он существует получаем его значение в переменную div. С помощью split() разбиваем строку по разделителю. Далее выполняем анимацию элемента #draggableDiv – задаем координаты его верхнего левого угла (left и top), куда этот элемент будет перемещен в течение 500мс. То же самое делается и для элемента #draggableP.

Буду благодарен, если найдете возможность оставить свои отзывы.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru