Clever Geek Handbook

Remember jQuery tool palette position is dragged between page refreshes

I have a tool palette that appears when an admin user is logged into the site. The palette can be dragged (via jQueryUI.draggable) and I would like it to remember the position between pages / updates ... Is there a standard way to do this, or a plug-in that I should use, or should I steer my own (via cookies or something)?

+2


source to share


3 answers


Cookies are a great option - you can use the PPK features like this:



$('#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);
     } });
+5


source


I don't know of any plugins or standards for this (although they most likely exist), but it's not a terribly complex operation. Cookies are one way to achieve it.



My preferred way of storing this type of client state is to set up a callback function that transfers the new state to the server via Ajax. Then I can do as I like. Typically, I will store it in the session, but there are times when I decide that certain things should persist and move them from the session to the database. Having this saved backend makes this change easy. I recommend starting by storing it in the session using an Ajax callback and getting it on the pageload.

+1


source


I think cookies are a good solution. There is even a jquery cookie plugin here . You can store the coordinates in a cookie to stop the event . When you change the page, you can check if the cookie exists and if so change the css to dragable.

You can store it on the server in a database, but it was a bit over the top for me. Because you have to change the schema.

Kevin suggested using unload event to store coordinates. This way you don't have to write to the cookie every time the drag stops.

+1


source






More articles:


All Articles