Запоминание jQuery перетаскиваемой позиции палитры инструментов между обновлениями страницы

Question

У меня есть палитра инструментов, которая отображается при входе пользователя с правами администратора на сайт. Палитра перетаскиваемая (через jQueryUI.draggable), и я хотел бы, чтобы она помнила положение между страницами / обновлениями ... Есть ли стандартный способ сделать это, или плагин, который я должен использовать, или мне нужно свернуть мой (через куки или что-то)?

Answer 1

Cookies - отличный вариант - вы можете использовать функции с помощью PPK следующим образом:

$('#palette')
     .css({ top: readCookie("palletteY")*1, left: readCookie("palletteX")*1 })
     .draggable({ stop: function (event, ui) {
         createCookie("palletteX", ui.position.left, 100);
         createCookie("palletteY", ui.position.top, 100);
     } });

Answer 2

Я думаю, что печенье - это хорошее решение. Здесь даже есть плагин jquery cookie . Вы можете сохранить координаты в файле cookie для события stop . Когда страница изменится, вы можете проверить, существует ли cookie, и если да, изменить CSS на перетаскиваемом.

Вы можете сохранить его на сервере в базе данных, но это кажется мне немного излишним. Потому что вам придется изменить свою схему.

Кевин предложил использовать событие unload для сохранения координат. Таким образом, вам не нужно писать в cookie каждый раз, когда перетаскивание прекращается.

Answer 3

Мне не известны плагины или стандарты для этого (хотя, скорее всего, они существуют), но это не очень сложная операция. Куки это один из способов сделать это.

Мой предпочтительный метод хранения этого типа состояния на стороне клиента - установить функцию обратного вызова, которая доставляет новое состояние на сервер через Ajax. Тогда я могу делать с ней все, что захочу. Обычно я сохраняю его в сеансе, но бывают случаи, когда я решаю, что определенные вещи должны сохраняться постоянно, и перемещаю его из сеанса в базу данных. Сохранение этой серверной части позволяет легко вносить эти изменения. Я рекомендую начать с сохранения его в сеансе с помощью обратного вызова Ajax и извлечения его при загрузке страницы.