jQuery draggable, save the position after reloaded page?

Question

I did a ton of research but I need a more personalized answer, I am pretty positive saving the draggable values requires a cookies solution, unlike jQuery .slider where you can save values like this

   //jQuery UI Slider
jQuery( ".slider" ).slider({
       animate: true,
           range: "min",
           value: $("input.slider-value").val(),
           min: 50,
           max: 700,
           step: 1,

           //this gets a live reading of the value and prints it on the page
           slide: function( event, ui ) {
               jQuery( "#slider-result" ).html( ui.value );
               jQuery( ".static_preview_image" ).height( ui.value );
           },

           //this updates the hidden form field so we can submit the data using a form
           change: function(event, ui) {
           jQuery('#hidden').attr('value', ui.value);
           } 

  });

    $( ".static_preview_image" ).css({height: $("input.slider-value").val()}); //This gives my element the height of the slider, it get stored in my slider function...

From my research .draggable does not work in the same fashion, it requires cookies?

If thats true, can someone explain how to use cookies in the most clean way possible, I just want to save top, right, left, bottom values...

Here is my draggable function

    $( ".MYELEMNT" ).draggable({
    containment: '#_moon_static_bg_status', // I set some containment

// Read this in another post, this outputs a live value of .MYELEMNT from the start of the drag.
start: function(event, ui) {

    // Show start dragged position of image.
    var Startpos = $(this).position();
    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},

// Same as above but prints the current position where MYELEMNT stops
stop: function(event, ui) {

    // Show dropped position.
    var Stoppos = $(this).position();
    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}


});

I want to say its as simple as writing something similar to how I get the value of the slider

    $( ".static_preview_image" ).css({height: $("input.slider-value").val()});

but I think I need the use of cookies...

This looks like a good candidate for using [localstorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage). — DaoWen, Jul 10 '13 at 22:41
Reading up on it now, is it a way of storing data without the use of a database? — Michael Joseph Aubry, Jul 10 '13 at 22:43
_localstorage_ is a standard API for storing information in a _client-side_ database using JavaScript. If you're not expecting the user to be able to go to another computer and access their saved data then this should work. This reference on [HTML5 localstorage](http://www.w3schools.com/html/html5_webstorage.asp) might be easier to follow. — DaoWen, Jul 10 '13 at 22:45
Nice, I didn't know about localstorage. Sounds like a very good way to store temp data for the client. — Lochemage, Jul 10 '13 at 22:45

score 1 · Answer 1 · answered Jul 10 '13 at 22:42

1

Two methods: First, cookies will work as they persist between page refreshes. Second, if you are using PHP you can use the clients session data from the server side to remember it, but this method requires you to send data (through ajax or something similar) from the client after they move the item to the server to notify of the new position so it can remember it.

EDIT: A comment above about using localstorage sounds like an excellent method, I would try that first.

answered Jul 10 '13 at 22:42

Lochemage

3,926
8
11

Cookies and localstorage have different use cases. This answer has a really good description: http://stackoverflow.com/a/3220802/1427124 – DaoWen Jul 10 '13 at 22:48
I am using PHP, I actually need to reuse the data, it's a preview in the admin side, the user drags the element to desired position and id like to save that position after page refreshes, and reuse that on the frontend.. localstorage sounds cool, but I do have a database and it sounds like I would need to use ajax to send the data, can someone help me there, only used ajax once.. – Michael Joseph Aubry Jul 10 '13 at 22:50
Obviously there are a ton of ways to store draggable data, but I want a solution that is simple and doesnt require a boat load of code :) – Michael Joseph Aubry Jul 10 '13 at 22:51
@MichaelJosephAubry - Yes, you're right. If you need to store the data on the server then localstorage is definitely not going to work for you. – DaoWen Jul 10 '13 at 22:52
Re looking at your comment, I see what youre saying now "Cookies and localstorage have different use cases" DaoWen that link was a good one, it explained it a little better to me, if I read correctly it said cookies are going to be needed either way "You'll want to leave your session cookie as a cookie either way though." what if in the admin side of things it was localstorage and outputting the data on the front end was server side? – Michael Joseph Aubry Jul 10 '13 at 22:55
would that save bandwith or would it be better to store the data server side then retrieve that data on the front end... not 100% sure if im seeing things clearly.. I think what i said makes sense – Michael Joseph Aubry Jul 10 '13 at 22:57
@MichaelJosephAubry - In order to display the item in the right position on the front end you _must_ store the value on the server, and if you have to store it on the server you might as well just do it all server-side. There's no point in doing a hybrid approach since you'll just be duplicating data. Unless you have a _huge_ amount of data I don't think it'll make any real difference bandwidth-wise. – DaoWen Jul 10 '13 at 22:59
ok that explains that... so I could just use ajax to store the data into a DB or do I need to write some PHP? I dont know much about storing data and retrieving data, My PHP experience is from opensource which usually handles that, I write within the variables that have already connected.. Like post_meta, and if else statements based on that... – Michael Joseph Aubry Jul 10 '13 at 23:02
@MichaelJosephAubry - AJAX can't magically push values into your database—you'd need to write some server-side code to handle the request (e.g. a handler in php). You can go do some research on that, but if you have more questions about it you should really post a new question instead of continuing here. – DaoWen Jul 10 '13 at 23:10
When I was learning Ajax, w3 schools tutorial on it really helped me out and it is very simple. http://www.w3schools.com/ajax/ – Lochemage Jul 10 '13 at 23:16

jQuery draggable, save the position after reloaded page?

1 Answers1